z-index CSS 語法的使用

Z-index 可以用來設置元素的 Z 方向位置

Z-index 可以用來設置元素的 Z 方向位置,z-index 數字越大的在越上面,反之則在越下面。

可以把電腦螢幕平面的左右方向想成 x 軸,上下方向想成 y 軸,則"視線"面對"電腦螢幕"的這個垂直方向就是 z 軸。如果z-index為正數,則離用戶更近,堆疊位置在較上層;如果z-index為負數,則表示離用戶更遠。堆疊位置在較底層。

要使用多個元素重疊的效果,必須使用到 position,設定你的元素位置,若沒有設定則元素會在網頁上呈現為一般的區塊,沒辦法重疊起來;position 可設定為 static、absolute、relative、fixed 以及 top、right、bottom、left,其他的目前在 z-index 沒有效果。

多個元素堆疊特效

我們可以透過 z-index 設計多個圖層堆疊的效果,每個圖層的位置用 position 做微調。

範例中,我們將 green綠色的 z-index 設為 1,yellow黃色的 z-index 設為 2,red紅色的 z-index 設為 3,blue藍色的 z-index 設為 4,並且加上文字; 所以疊起來的順序就是 p1 最後面,p2 在中間,p3 在p2上面,p4在最上面。

微調z-index的效果















範例的html語法

範例的css語法



















本網頁著作權 cling 網頁設計 2015 All Rights Reserved.