将 3 个 div 浮动在另一个的顶部
[英]Float 3 divs one on the top of another
问题描述
我想做这样的事情：
我已经写了所有内容，但不能让 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>
6 个解决方案
解决方案1
2 已采纳 2019-11-20 09:12:37
您可以通过使用以下属性来实现：
例如
position: absolute - 通过将 position 设为绝对，您可以使用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, ie 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
0 2019-11-20 09:12:56
这是一种方法，可能不是很敏感等，但从这里你可以做 rest
.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
0 2019-11-20 09:13:09
.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
0 2019-11-20 09:13:19
我认为如果你想在你的链接图片中做类似的事情，你应该在绝对 position 中制作红色/黄色/蓝色，然后为它们指定一个 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
0 2019-11-20 09:14:11
只需使用 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
0 2019-11-20 10:07:14
解决此问题的一种方法是将 position 设置为绝对值，然后调整每个 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;
}
一个浮子在另一个浮子上
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.