CSS z-index 属性用于控制网页中元素在同一堆叠上下文中重叠时的堆叠顺序。 z-index 值较高的元素出现在值较低的元素前面或者说是上面。
下图演示了 z-index 布局以供参考:
z-index 属性可与 Position 元素一起使用嵌套在其他定位元素内。
属性值
auto: 默认值。堆栈顺序等于父元素的堆栈顺序。
<Integer>: 正整数或负整数。它将元素的堆栈级别设置为给定值。
适用范围
所有定位元素。
DOM 语法
object.style.zIndex = "2"; CSS z-index: auto
CSS z-index:auto 将元素的 z-index 设置为其父元素的堆栈顺序。它是 z-index 属性的默认值。
<html>
<head>
<style>
.box1 {
position: absolute;
height: 200px;
width: 280px;
background-color: #f0baba;
z-index: auto;
text-align: center;
padding: 3px;
left: 10px;
top: 10px;
}
.box2 {
position: absolute;
height: 120px;
width: 200px;
background-color: #eae98f;
z-index: 1;
text-align: center;
padding: 5px;
margin: 20px;
left: 30px;
top: 30px;
}
p {
margin-top: 250px;
}
</style>
</head>
<body>
<p>z-index 值为 auto 的元素出现在 z-index 值为 1 的元素后面或者说下面。</p>
<div class="box1">
<span>CSS z-index: auto</span>
<div class="box2">
<span>CSS z-index: 1</span>
</div>
</div>
</body>
</html> CSS z-index: 正整数
CSS z-index 属性可以具有正整数值。在堆叠顺序中，具有较高整数值的元素将出现在具有较低值的元素上方。
<html>
<head>
<style>
.box1 {
position: absolute;
height: 200px;
width: 280px;
background-color: #f0baba;
z-index: 1;
text-align: center;
padding: 3px;
left: 10px;
top: 10px;
}
.box2 {
position: absolute;
height: 140px;
width: 220px;
background-color: #eae98f;
z-index: 2;
text-align: center;
padding: 5px;
margin: 10px;
left: 30px;
top: 30px;
}
.box3 {
position: absolute;
height: 90px;
width: 160px;
background-color: #b7c8ae;
z-index: 3;
text-align: center;
padding: 5px;
margin: 20px;
left: 50px;
top: 50px;
}
p {
margin-top: 250px;
}
</style>
</head>
<body>
<p>z-index 值为 1 的元素出现在 z-index 值为 2 和 3 的元素后面(下方)。</p>
<div class="box1">
CSS z-index: 1
</div>
<div class="box2">
CSS z-index: 2
</div>
<div class="box3">
CSS z-index: 3
</div>
</body>
</html> CSS z-index: 负整数
您还可以使用负整数作为z-index属性值。具有负 z-index 值的元素将堆叠在具有较高 z-index 值的元素下方。
<html>
<head>
<style>
.box1 {
position: absolute;
height: 200px;
width: 280px;
background-color: #f0baba;
z-index: -3;
text-align: center;
padding: 3px;
left: 10px;
top: 10px;
}
.box2 {
position: absolute;
height: 140px;
width: 220px;
background-color: #eae98f;
z-index: -2;
text-align: center;
padding: 5px;
margin: 10px;
left: 30px;
top: 30px;
}
.box3 {
position: absolute;
height: 90px;
width: 160px;
background-color: #b7c8ae;
z-index: -1;
text-align: center;
padding: 5px;
margin: 20px;
left: 50px;
top: 50px;
}
p {
margin-top: 250px;
}
</style>
</head>
<body>
<p>z-index 值为-3 的元素出现在z-index 值为-2 和-1 的元素后面(下方)。</p>
<div class="box1">
CSS z-index: -3
</div>
<div class="box2">
CSS z-index: -2
</div>
<div class="box3">
CSS z-index: -1
</div>
</body>
</html> CSS z-index: Sticky
以下示例演示如何z-index 属性可用于控制具有position: Sticky 属性的元素的堆叠顺序，以便它们在页面滚动时保持固定在适当的位置 -
<html>
<head>
<style>
.box1 {
position: sticky;
height: 200px;
width: 280px;
background-color: #f0baba;
z-index: 1;
text-align: center;
padding: 3px;
margin: 10px;
left: 10px;
top: 80px;
}
.box2 {
position: sticky;
height: 140px;
width: 220px;
background-color: #eae98f;
z-index: 2;
text-align: center;
padding: 5px;
margin: 10px;
left: 40px;
top: 200px;
}
.box3 {
position: sticky;
height: 90px;
width: 160px;
background-color: #b7c8ae;
z-index: 3;
text-align: center;
padding: 5px;
margin: 10px;
left: 70px;
}
</style>
</head>
<body>
<p>Move cursor upward to see the effect.</p>
<div class="box1">
CSS z-index: 1
</div>
<div class="box2">
CSS z-index: 2
</div>
<div class="box3">
CSS z-index: 3
</div>
</body>
</html> CSS z-index: 固定位置
下面的示例演示了如何使用 z-index 属性使元素在用户向下滚动时保持在内容顶部，即使它具有position:fixed 属性 -
<html>
<head>
<style>
.container {
position: relative;
height: 350px;
}
.box1 {
position: fixed;
height: 200px;
width: 280px;
background-color: #f0baba;
z-index: -3;
text-align: center;
padding: 3px;
left: 10px;
top: 10px;
}
.box2 {
position: fixed;
height: 140px;
width: 220px;
background-color: #eae98f;
z-index: -2;
text-align: center;
padding: 5px;
margin: 10px;
left: 30px;
top: 30px;
}
.box3 {
position: fixed;
height: 90px;
width: 160px;
background-color: #b7c8ae;
z-index: -1;
text-align: center;
padding: 5px;
margin: 20px;
left: 50px;
top: 50px;
}
h3 {
margin-top: 320px;
}
</style>
</head>
<body>
<h3>向下滚动内容查看效果。</h3>
<div class="container">
<div class="box1">
CSS z-index: -3
</div>
<div class="box2">
CSS z-index: -2
</div>
<div class="box3">
CSS z-index: -1
</div>
</div>
</body>
</html> CSS z-index: 具有静态位置
以下示例显示 z-index 属性不会影响具有静态属性的元素的堆叠顺序 -
<html>
<head>
<style>
.box1 {
position: static;
height: 200px;
width: 280px;
background-color: #f0baba;
z-index: 1;
text-align: center;
padding: 3px;
margin: 10px;
left: 10px;
top: 10px;
}
.box2 {
position: static;
height: 140px;
width: 220px;
background-color: #eae98f;
z-index: 2;
text-align: center;
padding: 5px;
margin: 10px;
left: 30px;
top: 30px;
}
.box3 {
position: static;
height: 90px;
width: 160px;
background-color: #b7c8ae;
z-index: 3;
text-align: center;
padding: 5px;
margin: 10px;
left: 50px;
top: 50px;
}
</style>
</head>
<body>
<p>如果将position属性设置为静态，则z-index属性对元素的堆叠顺序没有影响。</p>
<div class="box1">
CSS z-index: 1
</div>
<div class="box2">
CSS z-index: 2
</div>
<div class="box3">
CSS z-index: 3
</div>
</body>
</html> CSS z-index: 具有相对位置
该示例显示，当元素具有position:relative 属性时，z-index 属性相对于其在文档流中的原始位置定位元素。
<html>
<head>
<style>
.box1 {
position: relative;
height: 200px;
width: 280px;
background-color: #f0baba;
z-index: 1;
text-align: center;
padding: 3px;
margin: 10px;
left: 10px;
top: 10px;
}
.box2 {
position: relative;
height: 140px;
width: 220px;
background-color: #eae98f;
z-index: 2;
text-align: center;
padding: 5px;
margin: 10px;
left: 30px;
top: 30px;
}
.box3 {
position: relative;
height: 90px;
width: 160px;
background-color: #b7c8ae;
z-index: 3;
text-align: center;
padding: 5px;
margin: 10px;
left: 50px;
top: 50px;
}
</style>
</head>
<body>
<p>如果位置是相对的，则 z-index 属性相对于其原始位置定位元素。</p>
<div class="box1">
CSS z-index: 1
</div>
<div class="box2">
CSS z-index: 2
</div>
<div class="box3">
CSS z-index: 3
</div>
</body>
</html>