在前端開(kāi)發(fā)中，我們經(jīng)常會(huì)遇到需要控制元素層級(jí)的情況。這時(shí)候就可以使用 CSS 中的z-index屬性來(lái)實(shí)現(xiàn)。

z-index屬性是用來(lái)控制元素在層疊文檔流中的順序，數(shù)值越大，元素在層疊文檔流中的層數(shù)越高，越靠近視窗的前端，也就越顯示在上層。

下面是一個(gè)簡(jiǎn)單的示例，包含了 3 個(gè)盒子，使用了不同的 z-index 值：

.box1 {
position: absolute;
top: 20px;
left: 20px;
z-index: 1;
}
.box2 {
position: absolute;
top: 50px;
left: 50px;
z-index: 2;
}
.box3 {
position: absolute;
top: 80px;
left: 80px;
z-index: 3;
}

可以看到，box3盒子覆蓋在box1和box2盒子之上，因?yàn)樗?code>z-index值最大。如果將box3盒子的z-index值改為 0，那么它就會(huì)被其他兩個(gè)盒子覆蓋。

需要注意的是，z-index值只對(duì)定位元素起作用，也就是只有position屬性值為absolute、fixed或relative的元素才能使用。

還有一些需要注意的細(xì)節(jié)，如z-index值對(duì)于同一父元素的子元素才有意義，不同父元素下的元素層疊時(shí)不受影響。z-index值如果相同，則后面出現(xiàn)的元素會(huì)覆蓋前面出現(xiàn)的元素。此外，較小的z-index值可以覆蓋同級(jí)較大的值，但不能跨級(jí)實(shí)現(xiàn)。

總之，z-index屬性是一個(gè)非常實(shí)用的屬性，掌握好它的使用方法可以讓我們的頁(yè)面布局更加豐富多彩。