15課：索引層（z-index）的層

CSS創造三維空間，即高度，寬度和深度。我們在前面幾課已看到了兩維空間。這一課將學習怎樣讓不同元素變成層。換句話說，就是讓元素相互層疊。

為了做到這一點，可以給每個元素分配一個數字（z-index）。該系統是數字高的元素層疊在數字低的元素之上。讓我們以撲克牌的同花順為例，每張牌都有一個z-index：

在這個實例中，數字1-5排列，但也可以使用不同的數字獲取相同的結果。重要的是按照數字順序排列。撲克牌舉例的代碼如下：

#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代替圖表創造標題效果等。這種方法的好處除了文字加載速度快以外，還有利于搜索引擎排名。