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>

Do you actually need separate elements that have their own content or can you use pseudo elements or other visual effects? — James Coyle, Nov 20 '19 at 09:12

terahertz · Accepted Answer · 2019-11-20T09:21:21.860

You can accomplish that by using these properties:

E.g.

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, 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>

score 0 · Answer 2 · answered Nov 20 '19 at 09:12

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>

score 0 · Answer 3 · answered Nov 20 '19 at 09:13

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

score 0 · Answer 4 · answered Nov 20 '19 at 09:13

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;
}

score 0 · Answer 5 · answered Nov 20 '19 at 09:14

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>

score 0 · Answer 6 · answered Nov 20 '19 at 10:07

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;
}

Float 3 divs one on the top of another

6 Answers6

Linked