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