在開發網頁時，有時候為了一些特殊的網頁效果，必須讓某些圖片蓋在另一個區塊上。但有時候為了應付這樣子的效果，反而讓HTML的結構或畫面的延展變的不太容易調整，透過CSS的z-index屬性可以調整區塊的權重，自由選擇哪一個區塊在最上方顯示。
z-index的值需填入整數(預設或auto代表權重是0)
範例：
HTML
1 | <div id="div1"></div> |
2 | <div id="div2"></div> |
CSS
1 | #div1 { width:200px; height:200px; position:absolute; background:red; z-index:3; } |
2 | #div2 { width:200px; height:200px; position:absolute; background:blue; left:50px; z-index:-2; } |
以上的效果會讓div1的壓在div2的上方