将 3 个 div 浮动在另一个的顶部答案

【问题标题】：Float 3 divs one on the top of another将 3 个 div 浮动在另一个的顶部
【发布时间】：2023-03-26 14:15:01
【问题描述】：

我想做这样的事情：

我已经全部写了，但不能让 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>

【问题讨论】：

你真的需要有自己内容的独立元素，还是可以使用伪元素或其他视觉效果？

标签： html css

【解决方案1】：

您可以通过使用以下属性来实现：

例如

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>

【讨论】：

【解决方案2】：

这是一种方法，可能不是很敏感等，但从这里您可能可以完成其余的工作

.box{
	width:150px;
	height:150px;
  position: absolute;
}
.colors{
  position: absolute;
  left: 40px;
  top:40px;
  width: 170px;
  height: 170px;
}
.red{
	background:#bf1900;
  top: 0;
  left: 0;
}
.yellow{
	background:#bfa900;
  top: 20px;
  left: 20px;
}
.blue{
	background:#1d00bf;
  top: 10px;
  left:10px;
}
.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="colors">
    <div class="box red"></div>
    <div class="box yellow"> </div>
    <div class="box blue"> </div>
  </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>

【讨论】：

【解决方案3】：

.box{
width:150px;
height:150px;
  position: absolute;
}

.red{
background:#bf1900;
  
}
.yellow{
background:#bfa900;
  margin: 40px;
}
.blue{
background:#1d00bf;
  margin: 20px;
  z-index: 1;
}
.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 blue"> </div>
<div class="box yellow"> </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>

【讨论】：

【解决方案4】：

我认为如果你想在你的链接图片中做类似的事情，你应该让红色/黄色/蓝色也处于绝对位置，然后为它们指定一个 z-index 属性，这样你就可以选择顺序“层”。

基本上我会这样写：

.box{
    width:150px;
    height:150px;
    position: absolute;
}

.red{
    background:#bf1900;
    top: 50px;
    left: 50px;
    z-index: 1;
}
.yellow{
    background:#bfa900;
    top: 150px;
    left: 150px;
    z-index: 2;
}
.blue{
    background:#1d00bf;
    top: 100px;
    left: 100px;
    z-index: 3;
}

【讨论】：

【解决方案5】：

只需使用 position 属性和 margin 或 top/left 属性。我使用边距只是为了显示。

.box{
	width:150px;
	height:150px;
}
.small-box{
  width:50px;
	height:50px;
  position:absolute;
  margin: 30px 0px 10px 10px;
}

.red {
	background:#bf1900;
  margin-top: 20px;
}
.yellow{
	background:#bfa900;
  margin-left: 35px;
  margin-top: 40px;
}
.blue{
	background:#1d00bf;
  margin-left: 25px;
}
.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="small-box red"></div>
	<div class="small-box yellow"> </div>
	<div class="small-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>

【讨论】：

【解决方案6】：

解决此问题的一种方法是将位置设置为绝对位置，然后调整每个 div 的位置。

试试下面这个。

.box{
  position:absolute;
    width:150px;
    height:150px;
}

.red{
    background:#bf1900;
  top: 1.5em;
  left: 1.1em;
}
.yellow{
    background:#bfa900;
  top:3em;
  left: 2em;
}
.blue{
    background:#1d00bf;
  top: 5em;
  left: 3em;
}
.green{
    width: 100%;
    height: 100px;
    background:#00700f;
    position: absolute;
    bottom: 0;
  color: white;
}
.black{
    background: black;
    position: absolute;
    top: 0;
    right: 0;
    width: 250px;
}

【讨论】：