CSS 布局 - z-index 财产
这 z-index 属性指定元素的堆栈顺序。
z-index 属性
当元素定位时，它们可以重叠其他元素。
这 z-index 属性指定元素的堆叠顺序（哪个元素应该放在其他元素的前面或后面）。
元素可以具有正或负的堆栈顺序：
这是一个标题
由于图像的 z-index 为 -1，因此它将被放置在文本后面。
笔记： z-index 仅适用于定位元素 （位置：绝对、位置：相对、位置：固定或位置：粘性）和弹性项目 （显示的直接子元素：flex 元素）。
另一个 z-index 示例
例子
这里我们看到，堆栈顺序较高的元素总是位于堆栈顺序较低的元素之上：
<html>
<head>
<style>
。容器 {
位置：相对；
}
。黑盒子 {
位置：相对；
z索引：1；
边框：2px 实心黑色；
高度：100px；
边距：30px；
}
.灰盒 {
位置：绝对；
z索引：3；
背景：浅灰色；
高度：60px；
宽度：70%；
左边：50px；
顶部：50px；
}
.绿盒 {
位置：绝对；
z索引： 2；
背景：浅绿色；
宽度：35%；
左边：270px；
顶部：-15px；
高度：100px；
}
</style>
</head>
<body>
<div class="container">
<div class="black-box">黑盒子</div>
<div class="gray-box">灰箱</div>
<div class="green-box">绿盒</div>
</div>
</body>
</html>
亲自尝试 »
没有 z-index
如果两个定位元素相互重叠而没有 z-index 指定，元素定义HTML 代码最后 将显示在顶部。
例子
与上面的例子相同，但这里没有指定 z-index：
<html>
<head>
<style>
。容器 {
位置：相对；
}
。黑盒子 {
位置：相对；
边框：2px 实心黑色；
高度：100px；
边距：30px；
}
.灰盒 {
位置：绝对；
背景：浅灰色；
高度：60px；
宽度：70%；
左边：50px；
顶部：50px；
}
.绿盒 {
位置：绝对；
背景：浅绿色；
宽度：35%；
左边：270px；
顶部：-15px；
高度：100px；
}
</style>
</head>
<body>
<div class="container">
<div class="black-box">黑盒子</div>
<div class="gray-box">灰箱</div>
<div class="green-box">绿盒</div>
</div>
</body>
</html>
亲自尝试 »
CSS 属性
| 财产 | 描述 |
|---|---|
| z 索引 | 设置元素的堆叠顺序 |
