Float 3 Divs One On The Top Of Another

May 02, 2023 Post a Comment

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

Solution 1:

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>

Solution 2:

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>

Solution 3:

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

Solution 4:

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

Solution 5:

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>

Learn Html5