在開發網頁時,有時候為了一些特殊的網頁效果,必須讓某些圖片蓋在另一個區塊上。但有時候為了應付這樣子的效果,反而讓HTML的結構或畫面的延展變的不太容易調整,透過CSS的z-index屬性可以調整區塊的權重,自由選擇哪一個區塊在最上方顯示。

z-index的值需填入整數(預設或auto代表權重是0)

範例:
HTML

<div id="div1"></div>
<div id="div2"></div>

CSS

#div1 { width:200px; height:200px; position:absolute; background:red; z-index:3; }
#div2 { width:200px; height:200px; position:absolute; background:blue; left:50px; z-index:-2; }

以上的效果會讓div1的壓在div2的上方

Categories: CSS