CSS div positioning

Values:
-static
-relative
-absolute
-fixed
-inherit



CSS div positions: Realative and Absolute


-RELATIVE is the default value. An element with position: RELATIVE is not positioned in any special way. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.

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

Parent div:<div class="a">
Child div:<div class="b">

HTML code:


<div class="a">
  <p>div class="a"</p>
 <div class="b">
  <p>div class="a"</p>
 </div>
</div>

result:


<div class="a">

.a {
position:relative;
width:750px;
height:350px;
background-color:#7A8294;
border:2px solid;
 }


<div class="b">

.b {
position:absolute; top:10px;
left:15px; width:20%; height:100px; border:1px solid white;
background-color:#F30;
}




MORE EXAMPLES


<div class="a">

<div class="b">

<div class="c">

<div class="d">

<div class="e">

<div class="f">

<div class="g">

<div class="h">

<div class="i">

JSFiddle



HTML


<div class="a">
  <p>div class="a"</p>
 <div class="b">
  <p>div class="a"</p>
 </div>
 <div class="c">
  <p>div class="c"<p>
 </div>
 <div class="d">
  <p>div class="d"</p>
 </div>
 <div class="e">
  <p>div class="e"</p>
 </div>
 <div class="f">
  <p>div class="f"</p>
 </div>
 <div class="g">
  <p>div class="g"</p>
 </div>
 <div class="h">
  <p>div class="h"</p>
 </div>
 <div class="i">
  <p>div class="i"<p>
 </div>
</div>

CSS


.a {
position:relative;
width:800px;
height:350px;
background-color:#7A8294;
border:2px solid;

}

.b {
position:absolute;
top:10px;
left:15px;
width:145px;
height:100px;
border:1px solid white;
background-color:#F30;
}

.c {
position:absolute;
top:0px;
right:-45px;
width:150px;
height:100px;
border:1px solid white;
background-color:#36F;
}

.d {
position:absolute;
top:60px;
left:250px;
width:220px;
height:150px;
border:1px solid white;
background-color:#03C;
}

.e {
position:absolute;
top:110px;
left:290px;
width:150px;
height:90px;
border:1px solid white;
background-color:#F6F;
}

.f {
position:absolute;
left:200px;
bottom:22px;
width:210px;
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:145px;
height:100px;
border:1px solid white;
background-color:#0C0;

}

.i {
position:absolute;
left:0px;
bottom:0px;
width:150px;
height:100px;
color:white;
border:1px solid white;
background-color:black;
}



CSS Absolute and Relative Positioning Tutorial (YouTube)


Privacy Policy