时间戳

首页 > 解决方案 > 将 3 个 div 浮动在另一个的顶部

html - 将 3 个 div 浮动在另一个的顶部

问题描述

我想做这样的事情： 例如

我已经写了所有内容，但不能让 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>

标签： htmlcss

解决方案

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

例如

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>

推荐阅读