使用 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 #900;
background-color: #fdd;
}
#rel1 {
z-index: 3;
height: 100px;
position: relative;
top: 30px;
border: 1px dashed #696;
background-color: #cfc;
margin: 0px 50px 0px 50px;
}
#rel2 {
z-index: 2;
height: 100px;
position: relative;
top: 15px;
left: 20px;
border: 1px dashed #696;
background-color: #cfc;
margin: 0px 50px 0px 50px;
}
#abs2 {
z-index: 1;
position: absolute;
width: 150px;
height: 350px;
top: 10px;
right: 10px;
border: 1px dashed #900;
background-color: #fdd;
}
#sta1 {
z-index: 8;
height: 70px;
border: 1px dashed #996;
background-color: #ffc;
margin: 0px 50px 0px 50px;
}