使用 z-index
本指南的第一篇文章《不使用 z-index 屬性的堆疊》解釋了堆疊是如何預設排列的。如果你想建立自定義的堆疊順序，你可以在定位元素上使用 z-index 屬性。
z-index 屬性可以指定一個整數值（正數、零或負數），它表示元素沿假想 z 軸的位置。如果你不熟悉“z 軸”這個術語，可以想象頁面是一疊圖層，每個圖層都有一個數字。圖層按數字順序渲染，數字越大越靠上（X 表示任意正整數）。
| 圖層 | 描述 |
|---|---|
| 最底層 | 離觀察者最遠 |
| 圖層 -X | 具有負 z-index 值的圖層 |
| 圖層 0 | 預設渲染層 |
| 圖層 X | 具有正 z-index 值的圖層 |
| 頂層 | 離觀察者最近 |
備註
- 當沒有指定
z-index屬性時，元素會在預設渲染層（圖層 0）上渲染。 - 如果多個元素共享相同的
z-index值（即它們位於同一層），則適用《不使用z-index屬性的堆疊》一節中解釋的堆疊規則。
示例
在此示例中，圖層的堆疊順序使用 z-index 進行了重新排列。由於 DIV #5 不是定位元素，其 z-index 沒有效果。
HTML
html
<div id="abs1">
<strong>DIV #1</strong>
<br />position: absolute; <br />z-index: 5;
</div>
<div id="rel1">
<strong>DIV #2</strong>
<br />position: relative; <br />z-index: 3;
</div>
<div id="rel2">
<strong>DIV #3</strong>
<br />position: relative; <br />z-index: 2;
</div>
<div id="abs2">
<strong>DIV #4</strong>
<br />position: absolute; <br />z-index: 1;
</div>
<div id="sta1">
<strong>DIV #5</strong>
<br />no positioning <br />z-index: 8;
</div>
CSS
css
div {
padding: 10px;
opacity: 0.7;
text-align: center;
}
strong {
font-family: sans-serif;
}
#abs1 {
z-index: 5;
position: absolute;
width: 150px;
height: 350px;
top: 10px;
left: 10px;
border: 1px dashed #990000;
background-color: #ffdddd;
}
#rel1 {
z-index: 3;
height: 100px;
position: relative;
top: 30px;
border: 1px dashed #669966;
background-color: #ccffcc;
margin: 0px 50px;
}
#rel2 {
z-index: 2;
height: 100px;
position: relative;
top: 15px;
left: 20px;
border: 1px dashed #669966;
background-color: #ccffcc;
margin: 0px 50px;
}
#abs2 {
z-index: 1;
position: absolute;
width: 150px;
height: 350px;
top: 10px;
right: 10px;
border: 1px dashed #990000;
background-color: #ffdddd;
}
#sta1 {
z-index: 8;
height: 70px;
border: 1px dashed #999966;
background-color: #ffffcc;
margin: 0px 50px;
}