CSS z-index 垂直螢幕方向位置 (z軸高度)

CSS z-index 屬性用來設定網頁元素在垂直螢幕方向的位置關係,也就是網頁的 z 軸方向,z-index 是 CSS 的基本功能,廣受到大部份主流瀏覽器的支援,而 z-index 可以控制的網頁元素很多,例如 DIV 區塊、網頁圖片 ... 等,通常 z-index 會與控制網頁元速位置的 position 屬性搭配在一起使用,常見的圖片多層次重疊效果就可以使用 CSS z-index 屬性來設計。

CSS z-index 屬性語法
z-index: z 軸高度;
CSS z-index 的參數"z 軸高度"是一個比較值,數字較小的會在較下層,而數字越大的則在越上層,例如有兩張圖片,個別的 z-index 的屬性值分別設為 0 與 1,則 z-index:0 的圖片會在 z-index:1 的下層,由於是比較值,所以 z-index 的屬性值不需要單位。

CSS z-index 屬性範例一、文字在圖片上或下
範例的呈現效果
範例一有一張圖片(img tag)以及一段用 span 標籤標註起來的文字,我們在圖片標籤內設定 z-index:0,同時也在 span 標註的文字設定 z-index:1,這樣會產生 span 標籤內文字疊在圖片上的效果,讀者朋友們可以自己修改圖片的 z-index 參數,讓參數值小於 span 區域的 z-index 參數值,看看文字是否會被圖片蓋住。

補充:範例中的 position:absolute; 用來設定元素的絕對位置,讓圖片與文字元素的位置都是絕對位置,詳細的用法請參閱《CSS position 網頁元素位置設計》篇的解說。

CSS z-index 屬性範例二、DIV 區塊重疊
範例的呈現效果
範例二是用 z-index 來設定 DIV 區塊的 z 軸方向位置關係,兩個 DIV 區塊分別是 DIV1 以及 DIV2,位置都是絕對位置,不過灰色的 DIV1 距離上方為 0px、距離左方為 0px,而白色的 DIV 區塊距離上方與左方均為 30px,目的只是為了讓 z-index 產生的效果可以比較清楚看到,由於灰色的 DIV 區塊 z-index 參數值為 0,白色的 DIV 區塊 z-index 參數值為 1,所以白色的 DIV 區塊會疊在灰色的 DIV 區塊上。

CSS z-index 屬性範例三、多張圖片重疊
範例的呈現效果
範例三準備了三張不同顏色的圖片(img tag),要設計出三張圖片堆疊的效果概念其實與範例二類似,差別只是把 DIV 區塊換成圖片標籤(img tag)而已,三張圖片分別設定不同的 z-index 屬性值,再與 position 屬性搭配起來,就可以很輕易的產生三張圖片堆疊的效果囉!

更多網頁排版設計
分享於 2014-12-17