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

原文地址https://shiyousan.com/post/635861461562038949

在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属性，使其不起作用。