通俗易懂CSS（二）-这样分析理解z-index

一、示例分析

z-index是堆叠层的比较值，这里的堆叠层不是完全我们传统意义上看到的div嵌套层级。基于下面基本规则：

只针对position:absolute、relative（包括有float的）的块级元素可以设置z-index。未设置position或者设置了position:static的，即使设置了z-index也是没有作用的，所以可以忽略。设置了z-index就会创建堆叠层（z-index:auto除外；如果全部没有设置body会创建一个堆叠层）。

简单来说：忽略未设置z-index的层级（忽略这些代码来看），对比“兄弟”层级的z-index值大小。

 

这是示例代码设置120的效果图。

如上代码，background:black的，分别修改z-index：80、180看看效果。直接根据各自的z-index看得到效果。black和pink是会有z-index比较和影响效果的。验证证明，black和其他的z-index都有影响，虽然他们不是传统意义上div嵌套的兄弟关系。下面设置80的效果图：

这是180的效果图：

二、总结：

上图中的上半部分，我们定位为一个堆叠，每个设置了z-index的div是一个堆叠层，就像是一个可以插卡片的盒子一样，盒子是堆叠，卡片是堆叠层。

忽略未设置z-index的，兄弟堆叠层按照上图的上半部分的z-index大小在堆叠中排列；忽略掉的z-index一起聚集在z-index:auto位置。如示例中的background: red和background: blue是上图中的z-index:auto；对于有z-index的有子集的，又会在此层内创建一个堆叠层，形象地理解即是卡片盒的卡片也是一个盒子。

1、z-index:0也会创建堆叠层，z-index:auto不会，上面的示例，将background: blue的设置z-index:0，如论怎么设置background: black的z-index的正数多大，也不会显示在上面了。下图是设置z-index：0的效果：

2、要想设置子div被父div覆盖，只有父级不设置z-index（或设置成auto，不能设置0），并且设置子div为负数。

解析：去掉父级的z-index，子节点就回到了上一个堆叠中，并且子节点回到上图中的z-index:-n中，当然就在下面了；如果z-index还是保留z-index，就是上面的“创建子堆叠层放大”效果图中的，不管父级z-index是设置正数还是父数，子元素都是在他的上面建的。

2、分析时忽略掉没有z-index的div（未设置position或者设置了position:static的，即使设置了z-index也是没有作用的，所以可以忽略），同一层级（不是传统理解的div的嵌套层级，而是在同一个堆叠中的，即忽略掉那些没有设置z-index的div）的，然后比较看z-index哪个大哪个就在上面。

3、一旦设置z-index，就会创建堆叠层（未设置position或者设置了position:static的，即使设置了z-index也是没有作用的，所以可以忽略）。在有设置z-index的div再设置子div的z-index，即在堆叠层内创建堆叠层。

换句话说：如果父级的z-index小在下层，里面的子元素设置再大的z-index也不会显示在父级z-index大的元素上面。