利用IE关于Z-index的BUG造成的神奇效果
2008-04-17 22:24
344 查看
把下面这个代码保存为test.html
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<div id="contain" style="position: relative;">
<div id="box1" style="position: absolute; top: 100px; left: 210px; width: 200px; height: 200px; background-color: yellow; z-index: 20;">这个box应该在上面</div>
</div>
<div id="box2" style="position: absolute; top: 50px; left: 160px; width: 200px; height: 200px; background-color: green; z-index: 10;">这个box应该在下面,IE浏览器会对定位元素产生一个新的stacking context ,甚至当元素 z-index的为“auto”。</div>
分别在 firefox 和 IE 中打开,效果不一样吧。
到底是谁对呢?
其实是 firefox 是对的, 为什么这么说呢?我先说一下根据 Z-index 这个属性来显示元素的原理(根据CSS specification ):
1、元素的覆盖关系是根据 stacking context 来决定的,翻译过来就是:堆叠上下文环境,看起来很难理解吧,我把他叫做:堆叠元素,跟网页中的普通元素区分开来,一个html 的普通元素,比如一个<div>块,虽然是个<div>元素,只有它的 Z-index 被定义为一个非auto值时才产生堆叠元素,如果不定义 Z-index 的话默认为 auto 值,即不产生堆叠元素。2、如果堆叠元素关系是平等的,则 Z-index 大的元素在 Z-index 小的元素之上,如果 Z-index 一样,则后来居上
3、Z-index 的大小关系是:正值 > 0 > 负值
解释这个例子:
根据以上规则,contain 元素没有定义 Z-index 所以不产生 堆叠元素,这样 box1 跟 box2 产生的堆叠元素是平等的,所以 box1(黄) 应该在 box2(绿) 之上,firefox 是对的而IE有个BUG,它把 contain 也产生了一个堆叠元素并且设定Z-index 为0,于是 contain 跟 box2(绿)的堆叠元素是平等的,而contain 的 Z-index 为0,所以包含着 box1(黄)的contain就在 box2(绿)的下面了
相关文章推荐
- 关于在IE9下RequiredFieldValidator出现“无法获取属性“toLowerCase”的值: 对象为 null 或未定义”的Bug
- 关于ie的3像素bug
- [原创]分享IE7一个神奇的BUG(不是封闭标签的问题,的确是IE7的BUG)
- 关于IE下select标签的bug
- 关于JQuery动态添加的html会失去动态效果——(消灭bug①)
- [Bug]关于ArcGIS10进行Join关联进行时态演示无效果的问题
- 收集一些关于IE的BUG
- 【转】绕过IE的z-index BUG显示多级菜单一个方法
- IE7下 z-index的bug
- 有关于TextView 利用到在内容中添加图片的效果
- IE关于#footer沉底及居中显示的bug
- 关于SpannableString属性详细介绍以及利用SpannableString显示多种文本效果
- 关于IE的几个bug
- 简单地利用ie的JS解析bug来区分IE和非IE内核
- 关于居中布局和IE双倍边距bug
- 关于IE下z-index失效的问题
- 关于IE的BUG(CSS)
- 内部容器有浮动造成的边框断断续续效果 解决方法(IE)
- 关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
- 关于a标签中图文链接在IE的一个BUG分析