CSS_中的z-index（三）IE和FireFox上的迷惑
日期：2014-05-17 浏览次数：20854 次
?
例子一、???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
?
<div id="container"> <div id="box1">box1</div> </div> <div id="box2">box2</div>?
#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之上。
迷惑：
在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的负值。
?
?
例子二、?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
?
?<body> <div id="box1">为什么负值的定位元素在IE和FF下显示不一致呢？Why？</div> </body>#box1 { position: absolute; top: 100px; left: 210px; width: 200px; height: 200px; background-color: yellow; z-index: -10; }
那为什么负值的定位元素在IE和FF下显示不一致呢？
ie 中根据stack level规则： z-index为负的定位元素的stack level比父级stacking
context（此处是root stacking
context）高，显示在其上方。故box1在ie中能显示。ff3.0和标准一致，也能显示。大家可以试一下。
ff2.0 中由于那条特殊的stack level，即 z-index为负的定位元素的stack level比父级stacking
context（此处是root stacking context）低，所以显示在root stacking context下方。故不能看见。
另外，上面的代码中加上opacity那条后，在ff2.0中即可显示了。这又是什么原因呢？
推测：在火狐中如果给元素设置opacity属性（1除外），即会产生新的stacking context。
上面加上opacity属性后在ff2.0中可显示box1在body下，ff3.0box1在body上，（可以根据上面的stack level规则
自己分析）符合推测。
?
总结：
在一个stacking context中元素的z-轴显示顺序，由元素所处的stack level
决定。对于同一stack level的定位元素由z-index的大小进一步决定显示次序。
-
? ?
- ie中给元素设置position属性（static除外）可产生新的stacking context
? ? - ff中给元素设置opacity属性（1除外）可产生新的stacking context
除此之外（也许设置其他属性也会产生新的stacking context，但还不知道）只有定位元素设置了z-index(auto除外)才会产生新的stacking context，子元素将按照新的stacking context，定位。
?
http://www.tjkdesign.com/article ... _elements_stack.asp
这个网页上有关于z-index的一个很好的演示
大家可以看看
?
相关文章：
?
? z-index在IE中的迷惑
??Elaborate description of Stacking Contexts
??负值z-index在IE中不再迷惑(怿飞前辈来看下)
?
?
