在頁面設(shè)計(jì)中，層級(jí)樣式是非常重要的。它可以讓網(wǎng)頁元素按照自己的需求進(jìn)行布局和排列。然而，有的時(shí)候我們?cè)谠O(shè)置層級(jí)樣式時(shí)會(huì)遇到無法生效的問題。

以下是一個(gè)設(shè)置層級(jí)樣式失敗的例子：

.parent {
background-color: red;
width: 300px;
height: 200px;
position: relative;
}
.child {
background-color: blue;
width: 200px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
}

在這個(gè)例子中，我們有一個(gè)父元素和一個(gè)子元素。父元素有相對(duì)定位，而子元素有絕對(duì)定位并且設(shè)置了z-index為-1。我們預(yù)期子元素應(yīng)該在父元素的下方，但實(shí)際上子元素的背景色并沒有顯示出來。這是因?yàn)槲覀冊(cè)O(shè)置的z-index為負(fù)值，導(dǎo)致子元素被父元素所遮蓋。

我們可以在父元素上設(shè)置一個(gè)z-index的值，來解決這個(gè)問題：

.parent {
background-color: red;
width: 300px;
height: 200px;
position: relative;
z-index: 0;
}
.child {
background-color: blue;
width: 200px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
}

在這個(gè)例子中，我們?cè)诟冈厣显O(shè)置了z-index的值，將其設(shè)置為0。這個(gè)值將父元素放置在子元素的下方。然后我們?cè)賹⒆釉氐膠-index值設(shè)為-1，讓子元素放置到其他所有元素的最下層。

總之，在設(shè)置層級(jí)樣式時(shí)，我們需要注意z-index屬性的值。如果需要讓后來的元素處于上層，則將其z-index屬性值設(shè)為較大的正數(shù)；如果需要讓元素處于下層，則將其z-index屬性值設(shè)為較小的負(fù)數(shù)。