解决和分析CSS中z-index属性无效的问题

在html中，我们可以使用z-index属性控制定位元素的层叠顺序，z-index属性值越大，表示其优先级越高，优先级高的元素会显示在优先级低的元素之前（也就是遮盖住其他元素）。但是如果使用不当，会引发z-index属性无效的问题，本文针对一些导致z-index属性无效的情况做了分析，并研究对应的解决方法。

俗话说万变不离其宗，我们先了解下z-index属性使用的一些限制和条件，一般z-index无效的原因都和使用方式有关。

首先z-index只对定位元素有效，什么是定位元素呢？说简单点就是设置了position属性的元素，position的属性值如下：absolute-绝对定位、relative-相对定位、fixed-固定定位、inherit-继承父元素定位，static-静态定位。这里要注意，并不是所有的定位设置都有效果，absolute、relative和fixed是肯定有效果的，inherit取决于父元素，如果父元素没有设置定位则z-index无效，注意低版本IE浏览器不支持这个值。最后说下static这个静态定位，其实这是默认值，表示当前元素不进行定位，所以如果元素设置了这个属性值，其实是和没有设置是一样的，会使元素忽略掉z-index属性，使其不起作用。

PS：z-index是可以设置负值的

先贴下正常情况下的z-index使用：

<div style="height: 150px;">                
    <div style="z-index:1;position:absolute;background-color:#16a085;height:150px;width:150px;"></div>
    <div style="z-index:999;position: relative;color:#ff0000;">
        该文本包含在div元素中。。。。。。。。。。。。。。。
    </div>
</div>

最终正确的结果如下：

上面的范例中，绿色方块的div是作为一个底层元素，通过设置z-index属性，成功的让包含红色文本的div显示在绿色方块上面。注意这两个div都是进行过定位的。

接下来就开始分析我所遇到的几种z-index无效的情况，并给出解决办法，演示中的结果全部如下图所示，由于z-index失效，会导致红色文本被绿色方块覆盖住：

设置z-index属性的元素没有进行定位导致层叠无效

演示代码：

<div style="height: 150px;">
    <div style="z-index:1;position:absolute;background-color:#16a085;height:150px;width:150px;"></div>
    <div style="z-index:999;color:#ff0000;">
        该文本包含在div元素中。。。。。。。。。。。。。。。
    </div>
</div>

照常来说文本应该显示在图片上面，但是z-index不起效果，原本被作为绿色方块的div层遮盖住，主要原因在于包含文本的div并没有进行定位，没有设置position，或position为默认值static，所以一定要注意对需要设置层叠顺的元素进行定位！

父元素的层叠优先级比其他元素低

演示代码：

<div style="height: 150px;">
    <div style="z-index:1;position:absolute;background-color:#16a085;height:150px;width:150px;"></div>
    <div style="z-index:-1;position:relative;color:#ff0000;">
        <div style="z-index:999;position:relative;">该文本包含在div元素中。。。。。。。。。。。。。。。</div>
    </div>
</div>

虽然红色文字的div元素的z-index为999，但是由于其父元素的z-index为-1，导致文本被绿色区块所遮盖。这里涉及到一个层叠父子元素，兄弟元素的关系，由于本文重点不在这里，所以就不进行详细说明。简单来讲，对于层叠元素的优先级对比都是在兄弟元素之间进行的，子元素的优先级并不会影响到父元素与其他兄弟元素之间的优先级关系。

注意，这里所指的层叠元素，是指有进行定位并且有设置z-index属性的元素。如果没有进行定位和设置z-index的元素，其最终层叠优先级反而由当前元素的层叠子元素决定。解放方法就是将父级层叠元素的z-index属性值设置大点。

IE6-IE7下父元素没有设置z-index即父元素非层叠元素

演示代码：

<div style="height: 150px;">
    <div style="z-index:1;position:absolute;background-color:#16a085;height:150px;width:150px;"></div>
    <div style="position:relative;color:#ff0000;">
        <div style="z-index:999;position:relative;">该文本包含在div元素中。。。。。。。。。。。。。。。</div>
    </div>
</div>

其实这里的情况和上面所说的情况有点关系，涉及到父子层叠元素。红色文字在IE6和IE7下会被绿色方块遮掩（某些版本的IE8也会出现这种情况），但在其他浏览器则能正常展示优先级关系。

在IE7以下的IE浏览器一定要注意父级元素是否有设置z-index和进行定位，因为在这几个版本的浏览器中，最终决定层叠顺序的是最顶层的父元素，算是一个兼容性问题。

IE6下z-index属性受到float浮动属性的影响

演示代码：

<div style="height: 150px;">
    <div style="z-index:1;position:absolute;background-color:#16a085;height:150px;width:150px;"></div>
    <div style="z-index:999;position:relative;color:#ff0000;">
        <div style="float:left;">该文本包含在div元素中。。。。。。。。。。。。。。。</div>            
    </div>
</div>

这又是一个兼容性问题，其实现在可以不用太在意这些细节了，我感觉IE6浏览器快要从市场消失了，毕竟现在IE系列都出到IE11和 Edge了。但是这个问题依然要注意，在IE6下，子元素如果设置浮动会影响父元素的相对定位设置，最终造成父元素的z-index属性无效。

解决方法有三个，第一种就是去除元素的浮动属性，第二种方法是为浮动元素添加相对定位或者绝对定位，第三种方法就是将父元素的position:relative改为position:absolute。

IE6-IE7下使用inherit属性值进行定位

演示代码：

<div style="height: 150px;">
    <div style="z-index:1;position:absolute;background-color:#16a085;height:150px;width:150px;"></div>
    <div style="position:relative;color:#ff0000;">
        <div style="z-index:999;position:inherit;">该文本包含在div元素中。。。。。。。。。。。。。。。</div>
    </div>
</div>

依然是兼容问题，其实这个问题很少发生，因为现在元素定位很少使用inherit这个值，毕竟不太推荐使用。对于低版本的IE浏览器来说，本身是不支持inherit属性值的，自然就导致层叠无效。

z-index为非法值

好吧，这个除非马虎大意，否则这个错误基本上是不会发生的，z-index只能是整数。演示代码都省略了 -.- 。

总的来说，一定要注意z-index的基本特性，其实只要能理解透彻属性的原理，还是容易排查出无效的原因的。