在CSS中，z-index屬性用于控制元素的層疊順序。

.box {
position: absolute;
z-index: 1;
}

當多個元素重疊在一起時，z-index可以決定哪個元素位于頂部。而z-index越大的元素，它的層疊順序就越高，越靠近上方。

.box-1 {
position: absolute;
z-index: 1;
}
.box-2 {
position: absolute;
z-index: 2;
}

上面的代碼中，.box-2元素被設置為z-index為2，因此它會出現在.box-1元素的上方。

.box-1 {
position: absolute;
z-index: 1;
}
.box-2 {
position: absolute;
z-index: -1;
}

另外，z-index可以設置為負數，這樣元素就可以被放在其他元素的下方。

.box-1 {
position: absolute;
z-index: 1;
}
.box-2 {
position: fixed;
z-index: 100;
}

需要注意的是，z-index只對定位（position）屬性值為relative、absolute、fixed的元素生效。

總之，z-index在許多布局和設計中都是一個非常重要的工具，使用得當可以有效地控制HTML元素的層疊順序，使頁面更加美觀。