Values:
-static
-relative
-absolute
-fixed
-inherit
-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="g">
<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>
|
|
|
|
|
|
|
|
|