[分享]css不被遮z-index

CSS中的zindex属性可以用来设置一个元素的层级。通常情况下，zindex大的元素会覆盖在zindex小的元素之上。但有时候我们发现，即使设置了zindex，有些元素仍然被其他元素遮盖住了。这是为...

CSS中的z-index属性可以用来设置一个元素的层级。通常情况下，z-index大的元素会覆盖在z-index小的元素之上。但有时候我们发现，即使设置了z-index，有些元素仍然被其他元素遮盖住了。这是为什么呢？

首先，需要明确一点：z-index只能作用于元素的position属性不是static的元素，如relative, absolute和fixed。如果一个元素的position属性为static，即使设置了z-index，也不会有任何效果。

div {
    position: static; /*这里是无效的*/
    z-index: 10;
} 

其次，还有一种情况是元素所处的父元素也设置了z-index。这时，子元素的z-index会受到父元素的影响。如果父元素的z-index比子元素大，那么子元素即使设置了很大的z-index也会被父元素遮盖。

.container {
    position: relative;
    z-index: 5;
}

.box {
    position: absolute;
    z-index: 10; /*这里是有效的*/
} 

还有一种情况是元素的opacity属性不为1。如果一个元素的opacity小于1，就会创建出一个新的层叠上下文。这个新的层叠上下文与页面的根层叠上下文区分开来，因此z-index就不能作用于这个元素了。

div {
    opacity: 0.5;
    z-index: 10; /*这里是无效的*/
} 

以上就是造成元素z-index失效的可能原因。我们需要仔细分析具体的情况，避免出现这种问题，确保元素z-index的正确性。