三个div重叠显示代码

2023-06-26 22:05:09 三个div元素重叠显示，可以使用CSS的定位属性和z-index属性来实现。

三个<div>元素重叠显示，可以使用CSS的定位属性和z-index属性来实现。以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
.warp{position:relative;width:300px;height:300px}
.box {
position: absolute;
width: 200px;
height: 200px;
}.box1 {
background-color: red;
z-index: 3;
}
.box2 {
background-color: green;
z-index: 2;
top: 50px;
left: 50px;
}
.box3 {
background-color: blue;
z-index: 1;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div class="warp">
   <div class="box box1"></div>
   <div class="box box2"></div>
   <div class="box box3"></div>
</div>
</body>
</html>

在上面的示例中，.box类应用于每个<div>元素，表示它们是重叠显示的盒子。通过设置不同的z-index属性，可以控制盒子的堆叠顺序，值越大的盒子在上面显示。

.box1表示红色的盒子，它具有最高的z-index值（3），因此它将位于最上面。

.box2表示绿色的盒子，它的z-index值为2，位置稍微偏移（top: 50px; left: 50px;）以便与红色盒子重叠显示。

.box3表示蓝色的盒子，它的z-index值为1，位置进一步偏移（top: 100px; left: 100px;）以便与红色和绿色盒子重叠显示。

关键三个div要在父级.warp内，设置层叠位置定位。父级设置position:relative，子级设置position: absolute，同时设置top或bottom和left或right值定位子级位置与层叠效果，在用z-index设置层叠重叠顺序。

z-index值越大，越浮上层。