360极速浏览器对于z-index的特殊处理方式

很多人发现在给已经定位的层设置了相应的z-index值后，在IE,chrome,opera等浏览器中各层能够按照z-index的值正确堆叠，而在360浏览器中极速模式下却不能正确显示。经测试，360浏览器对于已定位层的z-index处理算法似乎有别于其他主流浏览器，如chrome等。

W3c的官方教程有如下两段话：

“绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。”

“绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。”

在css中，和定位相关联的属性有：

一、top、left等用于确定元素在二维平面中的相对位置，

二、而属性z-index则用于确定元素垂直于浏览器窗口方向的堆叠顺序。

对于第一条的处理，360浏览器和IE、chrome、opera等浏览器都正确无误，显示结果一致；

而对于第二条的处理，360似乎采取了不同于其他浏览器的算法。

IE等浏览器是将所有已定位的层在按照他们的z-index值在整个文档的空间内顺次堆叠，即z-index值小的层排列在z-index值大的层前面。也可以说，IE等浏览器只有一个z-index变量的命名空间。在同一文档内，z-index值大的层一定会出现在z-index值小的层前面。

而360浏览器的处理方式不是这样。对于相对定位的层，360的处理方式和IE等并无差异，可对于绝对定位，360采取了特殊的处理。

360浏览器将绝对定位的层的限定在它用于确定二维平面位置的已定位层之内，绝对定位的层的z-index不再具有全局意义，而只是其包含层之内的局部变量。

举例如下：

<div id=”a” style=”position:relative;z-index:2;”>

<div id=”b” style=”position:absolute;z-index:999;”>

</div>

<div id=”d” style=”position:absolute;z-index:998;”>

</div>

</div>

<div id=”c” style=”position:relative;z-index:3;”>

</div>

对于IE等浏览器，层c出现在层b的后面，因为其z-index比b小；而对于360浏览器，层c则出现在层b的前面,因为他的包含块a的z-index比c小,但是在同一包含块内，各层按照z-index值顺序堆叠。

明白了这一点，我们就不再为360的定位感到迷惑，也就能够有效地堆放页面元素。