文章目录
CSS 布局 - z-index 属性
z-index 属性指定元素的堆叠顺序。
z-index 属性指定元素的堆叠顺序（哪个元素应放置在其他元素的前面或后面）。
元素可以具有正或负的堆叠顺序：
这是一个标题由于图像的 z-index 为 -1，因此它将被放置在文本后面。
示例
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
注意：z-index 仅适用于定位元素（position: absolute、position:relative、position: fixed 或 position: sticky）和 flex 项目（display: flex 元素的直接子元素）。
示例
在这里，我们看到具有较高堆栈顺序的元素始终位于具有较低堆栈顺序的元素上方：
<html>
<head>
<style>
.container {
position:relative;
}
.black-box {
position:relative;
z-index:1;
border:2px solid black;
height:100px;
margin:30px;
}
.gray-box {
position:absolute;
z-index:3;
background:lightgray;
height:60px;
width:70%;
left:50px;
top:50px;
}
.green-box {
position:absolute;
z-index:2;
background:lightgreen;
width:35%;
left:270px;
top:-15px;
height: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>
.container {
position:relative;
}
.black-box {
position:relative;
border:2px solid black;
height:100px;
margin:30px;
}
.gray-box {
position:absolute;
background:lightgray;
height:60px;
width:70%;
左：50px;
上：50px;
}
.green-box {
位置：绝对；
背景：浅绿色；
宽度：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-index属性使用，如有问题欢迎私信和评论
标签：box,index,必知,元素,height,relative,position,CSS From： https://blog.csdn.net/qq_24018193/article/details/141276541