IE中z-index BUG
首先先来看一个演示例子的代码部分。
XHTML 部分:
<div id="container">
<div id="box1">这个box应该在上面</div>
</div>
<div id="box2">这个box应该在下面,IE浏览器会对定位元素产生一个新的stacking context ,甚至当元素 z-index的为“auto”。</div>
CSS 部分:
#container {
position: relative;
}
#box1 {
position: absolute;
top: 100px;
left: 210px;
width: 200px;
height: 200px;
background-color: yellow;
z-index: 20;
}
#box2 {
position: absolute;
top: 50px;
left: 160px;
width: 200px;
height: 200px;
background-color: green;
z-index: 10;
}
两个 box 被完全的定位,背景色为黄色的 box1 拥有 z-index 属性值 20,而背景色为绿色的 box2 拥有 z-index 属性值 10,唯一的区别在于背景色为黄色的 box1被放在了一个定义了属性 position:relative 的 div 中,并且在文档源代码中位前。
根据上述代码以及 z-index 的属性简介,我们来分析上面代码将会产生的效果位置。
CSS specification 中清楚的规定了除了根元素,只有定位元素的 z-index 被定义一个非 auto 的 z-index 值才能产生新的 stacking context。而例子中被相对定位的元素并没有定义 z-index,即 z-index 为默认值 auto 。所以按理他不会影响子元素的层叠顺序。即背景色为黄色的 box1 和背景色为绿色的 box2 的 stacking context 相同,即都为根元素产生的 root stacking context。再根据规则中当 stacking context 一样的时候,就用 z-index 的值来决定怎样显示的原理,则应该 z-index 属性值 20 的背景色为黄色的 box1 在 z-index 属性值 10 背景色为绿色的 box2 之上。
下面我们在 Firefox 和 IE 中分别测试最终的效果,会发现 Firefox 中显示的效果和上面分析的效果是完全一致的,而 IE 中的显示却不一致。
迷惑:在 IE 的 z-index 属性值 10 背景色为绿色的 box 却在了 z-index 属性值 20 的背景色为黄色的 box1 之上,和我们分析的结果完全不一致,为什么呢?
解惑:其实这是 IE 浏览器(windows)的一个 BUG ——在 IE 浏览器中,定位元素会产生一个新的 stacking context,并且从 z-index 的值为 0 开始。
现在让我们来理解上面的演示在IE中的显示逻辑。设置了相对定位的 container 产生一个新的 stacking context,所以其被定位的子元素背景色为黄色的 box1 以这个新的 stacking context 为参考来决定层叠顺序。而背景色为绿色的 box2 此时和背景色为黄色的 box1 的父元素 container 为同一个 stacking context,所以他们之间按照 z-index 来决定层叠顺序,即 z-index 属性值 10 背景色为绿色的 box2 在 z-index 属性值 0 的 container 之上。
其实这个 BUG 的影响范围很广,只是大家平时不太注意。下面来说明一个最常见的出现情况 z-index 的负值解析,很多朋友因为这个 BUG 的存在甚至武断的认为 IE 支持 z-index 的负值,而FF不支持 z-index 的负值。
举个例子或许更能形象表达。
XHTML 部分:
<body>
<div id="container">
<div id="box1">为什么负值的定位元素在 IE 和 Firefox 下显示不一致呢?Why?</div>
</div>
</body>
CSS 部分:
#container {
position: relative;
}
#box1 {
position: absolute;
top: 100px;
left: 210px;
width: 200px;
height: 200px;
background-color: yellow;
z-index: -10;
}
大家会发现在 Firefox 下,背景色为黄色的 box1 消失了,而 IE 下却显示。这也是我上面所说的,部分朋友武断的认为 IE 支持 z-index 的负值,而FF不支持 z-index 的负值的原因。我们要透过现象看本质。
在上个例子中的分析,我们知道:设置了相对位置(position: relative)的元素但没有给出非 auto 的 z-index 就不会产生 stacking context,也就不会影响其子元素的层叠顺序。所以背景色为黄色的 box1 的 stacking context 为根元素产生的 root stacking context。在上一节中我们讲到“对于未指定此属性的定位对象,z-index 值为正数的对象会在其之上,而 z-index 值为负数的对象在其之下”,按照规则,应该是设定了 z-index 为-10的黄色的 box1 会显示在于未指定 z-index 属性的元素(比如 body)之下。所以在 Firefox 下背景色为黄色的 box1 消失了。而在 IE 中设置了相对位置的 container 会拥有 z-index 值0,产生一个新的 stacking context,背景色为黄色的 box1 在新的 stacking context 内层叠顺序,故在 IE 中会看到显示。
不过这里还有一个问题,对于上面的代码,我们再精简一下:
XHTML 部分:
<body>
<div id="box1">为什么负值的定位元素在 IE 和 Firefox 下显示不一致呢?Why?</div>
</body>
CSS 部分:
#box1 {
position: absolute;
top: 100px;
left: 210px;
width: 200px;
height: 200px;
background-color: yellow;
z-index: -10;
}
大家会发现和上面没精简的代码显示的结果是一致的。但如果用上面的理解在 IE 下或许无法解释通。因为此时的理解背景色为黄色的 box1 的 stacking context 无论在 Firefox 下还是在 IE 下都是根元素产生的 root stacking context。
迷惑:那么在 IE 浏览器中,按照规则,背景色为黄色的 box1 也应该消失,然而却没有。
解惑:IE 浏览器似乎给 body 元素默认产生了stacking context。详细见《元素层叠级别(stack level)及z-index剖析》
通过上面两个简单的例子,我想大家应该大致知道为什么负值的 z-index 在 IE 和 Firefox 解析不一样,不是 Firefox 不支持,而是 IE 的 BUG。
分享到:
相关推荐
学习CSS网页制作:z-index在IE中的迷惑.pdf
对于未指定此属性的定位对象,z-index 值为正数的对象会在其之上,而z-index 值为负数的对象在其之下。 注意:这个属性不会作用于窗口控件,如selct 对象。在IE 5.5+中,iframe 对象开始支持此属性。而在之前的...
主要介绍了z-index为负值的元素无法点击到的解决方法,需要的朋友可以参考下
在IE6的環境下,如果網頁上有div區塊和下拉選單重疊在一起的時候,即使再怎麼調整下拉選單的z-index,下拉選單還是會把div區塊蓋住(在Firefox是正常的),google了一下網路上的資料,大多是用iframe來解這個問題,但...
NULL 博文链接:https://shoushounihao.iteye.com/blog/1884481
stylelint-z-index-value-constraint 用于设置z索引的最小和最大约束值的Stylelint规则。 这是插件的分支。 安装 npm install stylelint-z-index-value-constraint --save-dev 或者 yarn add stylelint-z-index-...
position定位如果有重叠的时候,z-index愈大,就显示在最上面 此时我们就可以设置div的css样式z-index:99999,那么该div就显示在最前面
下面小编就为大家带来一篇ie6 z-index不起作用的完美解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
主要为大家介绍margin 负值引起的层级(z-index)问题的解决方法,需要的朋友可以参考下
css里的z-index的使用
构建项目的时候由于 采用的 antd of vue ui库 ,里面没有类似点击唤醒遮罩层的组件 ,所以自己手写vue组件进行引入 ,主要用的是 css3 z-index 属性 ,通过z-index 值不同进行层级展示。( ps :之前处理过类似需求 ...
CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 z-index 的值设得很大也...
很久没有写前端代码了,最近有个项目需要亲自动手,但是在做的过程中,发现了一个很简单却又很多人应该碰到的问题,设置Z-INDEX属性无效。 在CSS中,只能通过代码改变层级,这个属性就是z-index,要让z-index起作用...
position值为非static时,如果不设置z-index属性,IE6/7下z-index默认为0,而IE8及以上浏览器z-index为auto,且zindex:auto的元素不参与堆叠优先级比较。 ff/chrome z-index IE6/7 IE8/9 不设置 0 auto au
react-z-index:轻松地管理全局组件z-index
dom结构:正常的实现方式很容易:因为B本身就在A的后面,当A和B都设置了position属性(非static),且没有设置z-index的时候,其层叠关系是后面的元素覆盖前面的元素,这样只需要给A-child设置z-index属性值即可。...
z-index最大值: IE ...最小值 IE FireFox Safari的z-index最小值是-2147483648 Opera的z-index最小值-2147483584 FireFox在-2147483648<=z-index<0时层不显示 在z-index<-2147483648时溢出实际数字正负不定
stylelint-number-z-index-constraint 用于设置z索引的最小和最大约束值的Stylelint规则。 安装 npm install stylelint-number-z-index-constraint --save-dev 用法 将此配置添加到您的.stylelintrc : { " ...
我想锁表头及锁定列。...这个道理想想也明白,Transform 就是一个影子,假像,所以它不考虑z-index.那怎么解决呢? 再百度,以及去stackoverflow看文章,也没办法。既然不能控制“new stacking contex