我想做这样的事情:
我已经全部写完了，但是不能让 3 个 div 一个一个地出现在另一个之上。
我怎样才能使红色、蓝色和黄色彼此重叠？
.box{
width:150px;
height:150px;
}
.red{
background:#bf1900;
}
.yellow{
background:#bfa900;
}
.blue{
background:#1d00bf;
}
.green{
width: 100%;
height: 100px;
background:#00700f;
position: absolute;
bottom: 0;
}
.black{
background: black;
position: absolute;
top: 0;
right: 0;
width: 250px;
}<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box red"></div>
<div class="box yellow"> </div>
<div class="box blue"> </div>
<div class="box green">Always on the bottom with 100% width</div>
<div class="box black"><font color="white">Always on the right top</font></div>
</body>
</html>最佳答案
您可以通过使用这些属性来实现:
例如
position: absolute - 通过将位置设置为绝对位置，然后您可以使用 top 和 left 属性来左右移动框。
z-index: 1 - 重叠各个框
top: 10px - 将盒子从容器顶部移开
left: 10px - 将框从其容器的左侧移动
示例代码:
.box{
width:150px;
height:150px;
}
/* Make the 3 boxes' position absolute*/
.red, .yellow, .blue{
position: absolute;
}
/* Add z-index, top, and left properties to individual boxes */
/* Use z-index: 9999, i.e. something that's higher than the rest if you want blue box to always be on top of others. */
.red{
background:#bf1900;
z-index: 1;
top: 24px;
left: 16px;
}
.yellow{
background:#bfa900;
z-index: 2;
top: 16px;
left: 12px;
}
.blue{
background:#1d00bf;
z-index: 3;
}
.green{
width: 100%;
height: 100px;
background:#00700f;
position: absolute;
bottom: 0;
}
.black{
background: black;
position: absolute;
top: 0;
right: 0;
width: 250px;
}<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box red"></div>
<div class="box yellow"> </div>
<div class="box blue"> </div>
<div class="box green">Always on the bottom with 100% width</div>
<div class="box black"><font color="white">Always on the right top</font></div>
</body>
</html>关于html - 将 3 个 div 一个 float 在另一个之上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58950408/