在CSS中，可以為每個(gè)元素指定一個(gè)數(shù)字（z-index），用于控制它們在頁面上的層疊順序。簡單來說，具有較大z-index值的元素將疊加在具有較小z-index值的元素之上。

一、層次堆疊案例

例如，我們正在玩撲克牌，拿到了一手同花大順。為了更好地展示這手牌，我們可以為每張牌分別指定不同的z-index值，以便它們在頁面上按照我們期望的層疊順序顯示。

在這個(gè)例子中，我們采用了1-5五個(gè)連續(xù)的數(shù)字來表示堆疊次序，但是你也可以用五個(gè)不同的其他數(shù)字來取得同樣的效果。這里的要點(diǎn)在于：用數(shù)字的大小次序反映希望的堆疊次序。

撲克牌這個(gè)例子的代碼可以這樣寫：

#ten_of_diamonds {
position: absolute;
left: 100px;
top: 100px;
z-index: 1;
}
#jack_of_diamonds {
position: absolute;
left: 115px;
top: 115px;
z-index: 2;
}
#queen_of_diamonds {
position: absolute;
left: 130px;
top: 130px;
z-index: 3;
}
#king_of_diamonds {
position: absolute;
left: 145px;
top: 145px;
z-index: 4;
}
#ace_of_diamonds {
position: absolute;
left: 160px;
top: 160px;
z-index: 5;
}

二、z-index屬性含義

一個(gè)元素在文檔中的層疊順序，用于確認(rèn)元素在當(dāng)前層疊上下文中的層疊級(jí)別。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。

1、z-index的屬性值越高越靠前。

2、元素可擁有負(fù)的 z-index 屬性值。

3、z-index 跟具體數(shù)字。

4、z-index的數(shù)值不跟單位。

如上圖所示，這個(gè)屬性的名字由坐標(biāo)系統(tǒng)得來，其中從左向右是x軸，從上到下是y軸。從屏幕到用戶是z軸。在這個(gè)坐標(biāo)系中，較高z-index值的元素比較低z-index值的元素離用戶更近，也就是說較高z-index值的元素最先呈現(xiàn)在用戶的視野，這會(huì)導(dǎo)致較高z-index值的元素覆蓋其他元素，這也稱為堆疊或疊放。