CSS中的z-index属性的作用

最新推荐文章于 2024-09-08 22:50:34 发布

G018_star sky♬

最新推荐文章于 2024-09-08 22:50:34 发布

阅读量1k

点赞数

分类专栏： CSS 文章标签： CSS 前端

本文链接：https://blog.csdn.net/qq_42526440/article/details/99967750

版权

CSS 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

当元素位于正常流程顺序之外时（受position等属性影响时），它们可以重叠于其他元素。

z-index属性指定元素的堆栈顺序（通过z-index的值可以决定哪个元素应放置在其他元素的前面或后面）。

HTML代码：

<html>
<head>
   <link rel="stylesheet" href="example.css">
</head>
<body>
	<div class="blue">blue (w3cschool)</div>
	<div class="red">red (w3cschool)</div>
</body>
</html>

CSS代码：

.blue {
background-color: #8EC4D0;
margin-bottom: 15px;
width: 120px;
height: 120px;
color: #FFF;
}
.red {
background-color: #FF4D4D;
position: relative;
width: 120px;
height: 120px;
color: #FFF;
margin-top: -50px;
margin-left: 50px;
}

在这里插入图片描述

指定z-index属性
为蓝色div元素指定较高的z-index值，为红色div元素指定较低的z-index值将导致以下结果：

HTML代码：

<html>
<head>
   <link rel="stylesheet" href="example.css">
</head>
<body>
	<div class="blue">blue (w3cschool)</div>
	<div class="red">red (W3c School)</div>
</body>
</html>

CSS代码：

.blue {
background-color: #8EC4D0;
position: relative;
margin-bottom: 15px;
width: 120px;
height: 120px;
color: #FFF;
z-index: 3;
}
.red {
background-color: #FF4D4D;
position: relative;
width: 120px;
height: 120px;
color: #FFF;
margin-top: -50px;
margin-left: 50px;
z-index: 2;
}