关于z-index的一点总结

两个同级的div,div1,div2;div2有个儿子为div2_1;

 

    

 

一． 在没有Div2_1的情况下

（1）      没有设置postion属性，则按照正常的文档流显示，如果div2设置margin-top:-20px;div1会被挡在下面。即后出现的会在上面。

（2）      Div1设置postion属性，而div2不设置postion属性，当div1设置的position值为relative 或者absolute的时候，在各大浏览器是如下结果（这里只说元素层叠，即哪个在上，哪个在下）：当div1的z-index的值设为正数的时候，div1在上方，当z-index的值是负数的时候，div1在下方；而当div1设置的position值为fixed的时候在除IE6的浏览器中效果同上，而在IE6中：z-index根本不起任何作用，所以我得出结论：IE6只有当position设置为relative 和absolute的时候才有效果。同理Div2设置postion属性，而div1不设置postion属性结论是一样的。

   （3）div1和div2都设置position(为relative/absolute/fixed(Ie6除外))的时候：谁的z-index大，谁就在上方。

二．在有div2_1的情况下(div2_1设置了Positon属性)

（1）div2_1与div2之间：无论谁的z_index值大，div2_1永远位于div2的上面。即子元素一定在父元素的上方。

（2）div2_1与div1之间：

当div2的z-index小于div1的z-index的时候：此时div1的 z-index为正的时候，div1就在div2_1的上方，为负的时候div1就在div2_1的下方，而不管谁大谁小。

当div2的z-index大于div1的时候：div2_1无论何值均在div1的上方，即父亲比别人大，自己一定比别人大。