前端必知必会-CSS布局-z-index属性

编程岁月

于 2024-08-19 09:00:00 发布

阅读量906

点赞数 21

分类专栏：前端必知必会文章标签：前端 css

本文链接：https://blog.csdn.net/qq_24018193/article/details/141276541

版权

前端必知必会专栏收录该内容

96 篇文章 1 订阅

订阅专栏

文章目录

CSS 布局 - z-index 属性
- 无 z-index
总结

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>