IE7浏览器z-index问题的解决方法
2015-07-18 10:19
423 查看
Html代码
Css代码
效果:box1被box2覆盖。
原因:其实这是IE浏览器的一个BUG——在IE浏览器中,定位元素会产生一个新的stacking context,并且从z-index的值为0开始。所以我们需要在这个元素的父元素上设置一个更高的z-index值。在上述的box1中的父元素container设置一个更大的z-index就能解决这个问题。
修改后的css代码
要想覆盖住父级的同级 ,父级的z-index就必须别的大。
<div id="container"> <div id="box1">This box should be on top</div> </div> <div id="box2">This box should not be on top; IE however seems to create a new stacking context for positioned elements, even when the computed z-index of that element is 'auto'. </div>
Css代码
body { margin: 0; padding: 0; } #container { position: relative;} #box1 { position: absolute; top: 100px; left: 510px; width: 200px; height: 200px; background-color: yellow;z-index:20; } #box2 { position: absolute; top: 50px; left: 460px; width: 200px; height: 200px; background-color: lime; z-index: 10;}
效果:box1被box2覆盖。
原因:其实这是IE浏览器的一个BUG——在IE浏览器中,定位元素会产生一个新的stacking context,并且从z-index的值为0开始。所以我们需要在这个元素的父元素上设置一个更高的z-index值。在上述的box1中的父元素container设置一个更大的z-index就能解决这个问题。
修改后的css代码
body { margin: 0; padding: 0; } #container { position: relative; z-index:30;} #box1 { position: absolute; top: 100px; left: 510px; width: 200px; height: 200px; background-color: yellow; } /* box1有没有z-index都无所谓了,但必须同position(relative或absolute)使用 */ #box2 { position: absolute; top: 50px; left: 460px; width: 200px; height: 200px; background-color: lime; z-index: 20; }效果:box1把box2覆盖。
要想覆盖住父级的同级 ,父级的z-index就必须别的大。
相关文章推荐
- OAF_开发系列22_实现OAF条形码BarCode
- uva 473(dp)
- 杭电 hdu 1507 Uncle Tom's Inherited Land* (二分匹配 + 两种方法构造边)
- 开源软件安装三部曲
- LeetCode之RemoveElement
- GCJ-02火星坐标系
- handsontable-developer guide-cell editor
- 新浪微博数据存储应用
- Android 开源框架Universal-Image-Loader完全解析(三)---源代码解读
- C++学习笔记32 断言函数
- handsontable-developer guide-cell type
- mac mysql 修改密码
- UVA - 227 Puzzle
- UVALive 2889
- 三层架构(一个)——什么是三层架构?
- 理论物理极础之插播数学3:偏微分
- handsontable-developer guide-setting options,callback
- iOS 字符串截取、拼接、大小写转换
- Android 开源框架Universal-Image-Loader完全解析(二)--- 图片缓存策略详解
- 百度地图AndroidAPI