css 堆叠一条线不通 |cssimg图片居中

.element{
position: relative;
z-index: 1;
background-color: pink;
height: 100px;
width: 100px;
border: 1px solid green;
}
.line{
height: 1px;
width: 100%;
background-color: black;
position: relative;
z-index: 2;
}

如上述代码，大家设置了元素 .element 的 z-index 的值是 1，而 .line 的 z-index 值是 2。大家期望的是 .line 这条线覆盖在 .element 元素上方，但实际上并没有生效，为什么呢？

首先大家需要知道的是，只有定位元素才能够设置 z-index 属性，因为非定位元素不在层叠上下文中，也就不会被覆盖。因此代码中大家给 .element 设置了 position: relative; 而 .line 也是通过设置 position 属性来设置为相对定位 position: relative;。

原因在于，父元素的层叠顺序属性会影响子元素。也就是说，如果在父元素上设置了 z-index 属性，那么它的子元素的 z-index 属性值即便比父元素大，也不能让子元素覆盖父元素的内容。而 .line 元素和 .element 元素没有直接的父子关系，二者层叠顺序独立，因此即使设置了 .line 的 z-index 大于 .element 的 z-index，也不会生效。

通过以上分析，大家可以总结出解决方案：让父级元素具有比 .line 更高的 z-index 值。大家可以在父元素上设置一个较高的 z-index 值，然后在子元素中设置一个较小的 z-index 值来实现层叠效果。

.wrapper{
position: relative;
z-index: 3;
}
.element{
position: relative;
z-index: 1;
background-color: pink;
height: 100px;
width: 100px;
border: 1px solid green;
}
.line{
height: 1px;
width: 100%;
background-color: black;
position: relative;
z-index: 2;
}

如上述代码所示，大家给父元素 .wrapper 设置了 z-index 值为 3，子元素 .line 的 z-index 值为 2，这样就可以实现 .line 覆盖在 .element 上方了。

在实际开发中，大家需要注意这一点，合理利用 z-index 属性可以帮助大家实现更加灵活多样的页面效果。