Float 3 divs one on the top of another
Question
I want to make something like this:
I have written it all, but can't make 3 divs appear one on the top of another.
How can I make it so that the red, blue and yellow colours are on one-another?
.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 answers
solution1
2 ACCPTED 2019-11-20 09:12:37
You can accomplish that by using these properties:
Eg
position: absolute - by making position absolute, you can then use top and left properties to shift the boxes around.
z-index: 1 - to overlap the individual boxes
top: 10px - to shift the box from the top of it's container
left: 10px - to shift the box from the left of it's container
Example Code:
.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>
solution2
0 2019-11-20 09:12:56
This is one way to do it, might not be very responsive etc. but from here you can probably do the 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>
solution3
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>
solution4
0 2019-11-20 09:13:19
I think that if you want to do like in your linked picture, you should make the red/yellow/blue also in an absolute position, and then specify a z-index property for them, so you can pick the order of the "layers".
Basically I'd write that:
.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;
}
solution5
0 2019-11-20 09:14:11
Just play with postion property and either margin or top/left property. I have used margin just for display purpose.
.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>
solution6
0 2019-11-20 10:07:14
One way of approaching this is by setting the position to absolute and then adjust the positioning for each div.
Try this one below.
.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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.