手册
目录
收藏229
分享
阅读1042
更新时间2025-07-16
当元素被定位时,它们可能会与其他元素重叠。
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)和弹性项目(display: flex 元素的直接子元素)。
在这里,我们看到具有较大堆叠顺序的元素始终位于具有较小堆叠顺序的元素之上:
运行实例 »Black boxGray boxGreen box
点击 "运行实例" 按钮查看在线实例
如果两个定位元素在没有指定 z-index 的情况下重叠,HTML 代码中最后定义的元素将显示在最上面。
与上面的例子相同,但这里没有指定 z-index:
运行实例 »Black boxGray boxGreen box
点击 "运行实例" 按钮查看在线实例
| 属性 | 描述 | 
|---|---|
| z-index | 设置元素的堆叠顺序。 | 
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
精选课程
							
							共5课时
17.2万人学习
							
							共49课时
77万人学习
							
							共29课时
61.7万人学习
							
							共25课时
39.3万人学习
							
							共43课时
70.9万人学习
							
							共25课时
61.6万人学习
							
							共22课时
23万人学习
							
							共28课时
33.9万人学习
							
							共89课时
125万人学习