CSS 堆疊順序的實現(xiàn)可以通過 z-index 屬性來完成。它控制著元素的層疊順序，數(shù)值大的元素會覆蓋數(shù)值小的元素。但有時候，我們會發(fā)現(xiàn)在 CSS 樣式中設(shè)置了元素的堆疊順序，但是一條線卻不通。

.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;
}

如上述代碼，我們設(shè)置了元素 .element 的 z-index 的值是 1，而 .line 的 z-index 值是 2。我們期望的是 .line 這條線覆蓋在 .element 元素上方，但實際上并沒有生效，為什么呢？

首先我們需要知道的是，只有定位元素才能夠設(shè)置 z-index 屬性，因為非定位元素不在層疊上下文中，也就不會被覆蓋。因此代碼中我們給 .element 設(shè)置了 position: relative; 而 .line 也是通過設(shè)置 position 屬性來設(shè)置為相對定位 position: relative;。

原因在于，父元素的層疊順序?qū)傩詴绊懽釉?/strong>。也就是說，如果在父元素上設(shè)置了 z-index 屬性，那么它的子元素的 z-index 屬性值即便比父元素大，也不能讓子元素覆蓋父元素的內(nèi)容。而 .line 元素和 .element 元素沒有直接的父子關(guān)系，二者層疊順序獨立，因此即使設(shè)置了 .line 的 z-index 大于 .element 的 z-index，也不會生效。

通過以上分析，我們可以總結(jié)出解決方案：讓父級元素具有比 .line 更高的 z-index 值。我們可以在父元素上設(shè)置一個較高的 z-index 值，然后在子元素中設(shè)置一個較小的 z-index 值來實現(xiàn)層疊效果。

.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 設(shè)置了 z-index 值為 3，子元素 .line 的 z-index 值為 2，這樣就可以實現(xiàn) .line 覆蓋在 .element 上方了。

在實際開發(fā)中，我們需要注意這一點，合理利用 z-index 屬性可以幫助我們實現(xiàn)更加靈活多樣的頁面效果。