第十二章：用z-index進(jìn)行層次堆疊
第十二章：用z-index進(jìn)行層次堆疊
CSS可以處理高度、寬度、深度三個(gè)維度。在前面的課程中，我們已經(jīng)了解了前兩個(gè)維度。在本課中，我們將學(xué)習(xí)如何令不同元素具有層次。簡言之，就是關(guān)于元素堆疊的次序問題。
為此，你可以為每個(gè)元素指定一個(gè)數(shù)字（z-index）。其原理是：數(shù)字較大的元素將疊加在數(shù)字較小的元素之上。
比方說，我們正在打撲克，并且拿了一手同花大順。我們可以通過為各張牌設(shè)定一個(gè)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;
}
該方法雖然簡單，但卻能應(yīng)付許多情況。你可以將圖片疊加倰文本之上，也可以將文本疊加到文本之上等等。
小結(jié)
層次可以應(yīng)用于許多情況之下。例如，可以用z-index實(shí)現(xiàn)為標(biāo)題（headline）增添效果（避免了采用圖片的方式）。這樣，一方面，裝載文本的速度比圖片要快；另一料面，采用文本可能更有利于提高網(wǎng)站的搜索引擎排名。
【第十二章：用z-index進(jìn)行層次堆疊】相關(guān)文章：