CSS Div Positioning

CSS Div Positioning: Absolute and Relative. Parent div. Child div. ABSOLUTE is a very powerful type of positioning that allows you to literally place any page element exactly where you want it. You use the positioning attributes top, left bottom and right to set the location.

by ITpresent

HTML

<a href="https://itpresent.com/web/css/divPositioning.php" target="_blank"><h3>

CSS div positions: Realative and Absolute</h3></a>

<div class="a">
<h3>&lt;div class=&quot;a&quot;&gt;</h3>
<div class="b">
<h3>&lt;div class=&quot;b&quot;&gt;</h3>
</div>
<div class="c">
<h3>&lt;div class=&quot;c&quot;&gt;</h3>
</div>
<div class="d">
<h3>&lt;div class=&quot;d&quot;&gt;</h3>
</div>
<div class="e">
<h3>&lt;div class=&quot;e&quot;&gt;</h3>
</div>
<div class="f">
<h3>&lt;div class=&quot;f&quot;&gt;</h3>
</div>
<div class="g">
<p>&lt;div class=&quot;g&quot;&gt;</p>
</div>
<div class="h">
<h3>&lt;div class=&quot;h&quot;&gt;</h3>
</div>
<div class="i">
<h3>&lt;div class=&quot;i&quot;&gt;</h3>
 </div>

CSS

h3 {
  text-align: center;
}
.a {
position: relative;
width: 80%;
height: 350px;
background-color: #7A8294;
border: 2px solid;
}
.b {
position: absolute;
top: 10px;
left: 15px;
width: 20%;
height: 100px;
border: 1px solid white;
background-color: #F30;
}
.c {
position: absolute;
width: 20%;
height: 100px;
float: right;
top: 0px;
right: -45px;
border: 1px solid white;
background-color: #36F;
}
.d {
position:absolute;
top:60px;
left:250px;
width:30%;
height:150px;
float:right;
border:1px solid white;
background-color:#03C;
}
.e {
position:absolute;
top:110px;
left:290px;
width:20%;
height:90px;
border:1px solid white;
background-color:#F6F;
}
.f {
position:absolute;
left:200px;
bottom:22px;
width:30%;
height:100px;
border:1px solid white;
background-color:#FF3;
}
.g {
position: absolute;
left: 300px;
bottom: 10px;
width: 25%;
height: 70px;
border: 1px solid white;
background-color: #8B4513;
}
.h {
position: absolute;
right: 20px;
bottom: -20px;
width: 20%;
height: 100px;
border: 1px solid white;
background-color: #0C0;
}
.i {
position: absolute;
left: 0px;
bottom: 0px;
width: 20%;
height: 100px;
color: white;
border: 1px solid white;
background-color: black;
}
#k {
text-align: left;
padding-left: 10px;
position: absolute;
top: 10px;
left: 15px;
width: 150px;
height: 300px;
border: 1px solid white;
background-color: #F30;
}
.o {
position: absolute;
float: left;
left: 300px;
font-size: 15px;
font-weight: bold;
margin-left: 5px;
}