CSS中的z-index讲解

0z-index设置元素的堆叠顺序。堆叠设置高的元素在堆叠设置低的元素的前面显示。

1.只有在定位元素（position:relative/absolute/fixed）下的z-index才有作用。

2.如果定位元素的z-index没有发生嵌套（意思就是子元素没有设置z-index）下应该遵循：a.后来居上准则（在z-index设置的数值一样的情况下，后面的元素会覆盖前面的元素）b.哪个z-index数值大，哪个就在上面（就是那个z-index数值大就显示在前面）。
但是如果定位元素的z-index发生嵌套应该遵循：祖先元素优先原则
看个例子：

<div style="position:relative;z-index:1;">
    <img src="1.jpg" style="position:absolute;z-index:22;">
</div>

<div style="position:relative;z-index:1;">
    <img src="2.jpg" style="position:absolute;z-index:1;">
</div>

我们可能会想1.jpg会覆盖2.jpg而显示在前面，但事实是2.jpg现在在前面。为什么会这样了？答案是——两个img的父元素也设置了z-index，根据祖先优先原则，又因为两个父元素的z-index数值一样，再根据后来居上准则，所以2.jpg现在在1.jpg前面。

注意：祖先优先原则有个前提：z-index必须是数值，而不是auto。