Positions :
The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.
However, these properties will not work unless the position property is set first. They also work differently depending on the position value.
Position property has following values,
- Static
- Relative
- Absolute
- Fixed
- Sticky
1) Static :
The element is positioned according to the normal flow of the document.The top, right, bottom, left, and z-index properties have no effect.This is the default value.
Every element has static value by default.
- In the above example there is no effect of position values(i.e. top,bottom,right and left) on item 2.
2) Relative :
In this property value original position of element in document flow remains same just like the static value.
But position values top,bottom,right and left will work on the element and element moves relative to its original position as per the given position values.
All other elements position in the webpage remains as it is.
- In the above example position property of item 2 is relative and top value is 10px so item 2 has moved form its original position by 10px from top.
3) Absolute :
In this property value item takes position realtive to its parent element.
After moving from its original position space of that element from normal document flow will removed.
Position of element will decide by values top,bottom,right and left.
- In the above code position of item 2 is absolute so it has moved from top 60px and from left 60px with respect to its parent element(i.e div container).
4) Fixed :
In this position element is removed from the normal document flow, and no space is created for the element in the page layout.
Element get the position relative to the browser window and dosen't move even you scroll the browser window.
- In the above code item 2 has position fixed with respect to values bottom 15px and right 10px at that position item two has got fixed and it is not moving even you try to scroll webpage.
5) Sticky :
In this position value first, element is treated as like relative position and after that it will treated like fixed position.
Element is move relative to the original position until reaches to the desired position and then after it will get fixed to taht loaction.
- In the above code item 2 is first move relative to its original position and get fixed once reach to top 10px position.