CSS学习笔记：z-index

柚木笙

于 2019-11-05 19:12:07 发布

阅读量182

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css z-index

本文链接：https://blog.youkuaiyun.com/linswsama/article/details/102890104

CSS 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了CSS中层叠上下文的概念，解释了position属性如何与z-index结合使用来控制元素的堆叠顺序。通过具体示例说明，当元素设置了绝对定位后，z-index属性才开始生效，影响元素的显示层级。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

元素才能设置 Posiition:absolution| relavete | fixed z-index才能生效

没有定位的元素设置了z-index也无效

.div1 {
position: absolute;
z-index: 0;
}
.div2 {
position: absolute;
z-index: 1;
}
.div3 {
z-index: 2;
}

在这里插入图片描述

<div class="box">
	<div class="div1">
		<p class="p11"></p>
	</div>
	<div class="div2">
		<p class="p21"></p>
	</div>
</div>

.box {
position: absolute;
z-index: 0;
}
.div1 {
position: absolute;
z-index: 1;
}
.p11{
background: yellow;
}
.p21{
position: absolute;
z-index: 21;
background: green;
}

如上设置，则 div2 和其父元素一样 z-index = 0;
比较P11 和 P21 的 层叠水平
则需比较 div1 和 div2 的 z-index ，如果 div1 > div2 ,则不论P11 z-index设置为多少，P11 都应该在P21 上方
在这里插入图片描述

学习