z-index用于確定元素在當前層疊上下文中的層疊級別，并確定該元素是否創(chuàng)建新的局部層疊上下文。z-index未定義或者值為auto時，在IE6,7下會創(chuàng)建新的局部層疊上下文，而在高級瀏覽器中，按照規(guī)范不產(chǎn)生新的局部層疊上下文，如下例：
demo：
div {
position: relative;
}
p {
position: absolute;
}
.a {
background: #f00;
z-index: 10;
}
.b {
background: #0ff;
z-index: 3;
}
<div id="nubm75x" class="test">
<p class="a">asdas</p>
</div>
<div id="nubm75x" class="test2">
<p class="b">asdas</p>
</div> 細心的你會發(fā)現(xiàn)上述代碼在IE6,7下的呈現(xiàn)與高級瀏覽器下不同。.test1和.test2未設(shè)置z-index，在高級瀏覽器下不會產(chǎn)生新的局部層疊上下文，也就是說它們的子元素沒有被新的局部層疊上下文包裹，那么它們的子元素就處在同一個層疊上下文中，可以直接通過自身的層疊級別來決定顯示順序，所以結(jié)果是.a 覆蓋了.b，因為.a的層疊級別比.b高；而在IE6,7下，.test1和.test2會產(chǎn)生新的局部層疊上下文，即它們的子元素被新的局部層疊上下文包裹，于是子元素顯示順序只能依賴.test1和.test2層疊級別來確定。所以結(jié)果是.b 覆蓋了.a，因為.b的父元素.test2在HTML文檔流中排在.test1之后，后來者居上覆蓋前者。參見demo: z-index創(chuàng)建局部層疊上下文在IE6,7下與高級瀏覽器下的區(qū)別
| Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
|---|---|---|---|---|---|---|---|---|
| Basic Support | 8.0+ | 40.0+ | 40.0+ | 8.0+ | 40.0+ | 8.0+ | 4.4+ | 28.0+ |
| 負值 #1 |