將 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.