While developing the front end of a website we want more control over the position of element than float. For this purpose we use Position property with five different values. With each value we can position an element with different way. Position is use as position: static|relative|absolute|fixed|inherit with four dimension top, bottoms, left and right.
Position Static
By Default value of element Position is static( position: static ) .If an element have position static it mean that it show normal document flow and It will ignore all dimension values (top, left, bottom, right) and any Z-index value. Static file show position like a normal box and its flow depending on element is block or inline.
Position Relative
Relative value of Position have same flow like static But the difference is that relative value accepts the box offset values top, right bottom and left. With these values we can position an element in any direction from default position. If want 20px space from top and left of a div then simply we write.
.box {
position: relative;
top:20px;
left:20px;
}
This will assign relative position to div and 20px space from top and left. We can assign two more values of bottom and right to div for more spacing.
Position Absolute
Absolutely positioned element accept dimension and flow of element is not according to normal flow. Element is position relates to its parent and if parent is not present then the position is according to the body. For example if a div is inside a Section than it take position according to the section. If Section is not present and div have absolute position than parent is body and div take position according to the its parent. Div move in when a positive value is assigned to its offset attribute and move out when offset attribute have negative value.
<div>
<h2>Div Position</h2>
</div>
<section>
<div>
<h2>Div Position</h2>
</div>
</section>
div{
position: absolute;
top:20px;
left:20px;
}
In above case when div is used after body tag then body is parent of div and it takes position according to body. But in latter case parent of div is a section and it is positioned according to the section.
Fixed position
fixed is just like a absolute but it positioning is relative to the browser view .If an element is positioned fixed then it will not scroll with page and element always visible at any point of view of page. Fixed position is used to float element in same position even after scrolling the page.
div{
position: fixed;
top:20px;
left:20px;
}
In this style div position is fixed that mean div is positioned according to the browser view and div left 20px space from top and 20px from left . And div don’t scroll with page.
Z-index
when we use position we can overlap other elements. z-index is used to place elements over one another .An element with greater stack value is always in front of an element with lower stack order. An element can have positive or negative stack order. In following example image will shown behind the text because z-index value of image is in negative.
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
<h1>this is a heading</h1>
<img src=”w3css.gif” width=”100″ height=”140″ />
Position help us to arrange the layout is easy way the a float .For simple layout adjustment we use Relative position For more we use Absolute and For advance level we use fixed position .for Example if we want a Menu which is shown on top of the page even we scroll down then we fixed the position of menu.