What is the Position property in CSS?
The position property in CSS defines how the HTML elements are positioned in a document. The position in CSS contains the properties of the top, left, bottom and right and specifies the final position of an HTML element. The position in CSS is not set until we specify the values of the top, left, bottom and right properties.
The position properties have five values:
static
relative
absolute
fixed
sticky
position: static;
By default, all the HTML element positions are set to static only. The position: static is not affected by the top, left, bottom and right properties. This property will always have the normal flow of the web page.
Syntax:
position: static;
top: value; / left: value; / bottom: value; / right: value;
Example:
In the above example, we applied position: static; to the 'Three' box. Even though we applied position: static; the 'Three' box position remains the same just like the remaining boxes. By default, without stating the position, the remaining boxes are set to position: static;
position: relative;
An HTML element with position: relative; acts as position: static; but we can change its location by setting the values of the top, left, bottom and right properties. The relative position is moved from its actual position to another location according to the top, left, bottom and right property values and stays there. The position: relative; property leaves the space of its actual position in the web page without disturbing any other HTML elements in the web page. Note that the top, left, bottom and right property values are calculated from the actual position of the element but not from the document page.
Syntax:
position: relative;
top: value; / left: value; / bottom: value; / right: value;
Example:
In the above example, we applied for position: relative; to the 'Three' box and gave top: 10px; left:150px; The 'Three' box is moved from the top of 10px; and left of 150px; from its actual position and stays there only. The remaining boxes' positions remain the same.
position: absolute;
An HTML element with position: absolute; is moved from its actual position to another location according to the top, left, bottom and right property values and get stays there only. The element with absolute position property moves without leaving any space on the web page. The next element will take up the actual position of the element with absolute position property. Note that the top, left, bottom and right property values are calculated from the document page but not from the element location.
Syntax:
position: absolute;
top: value; / left: value; / bottom: value; / right: value;
Example:
In the above example, we applied for position: absolute; to the 'Three' box and gave right: 50px; The 'Three' box is moved from the right of 50px; from the web page and stays there only. And the 'Four' box took the place of the 'Three' box.
position: fixed;
An HTML element with position: fixed; is moved from its actual position to another location according to the top, left, bottom and right property values and it gets fixed to the location. The element with fixed position property moves without leaving any space on the web page. The next element will take up the actual position of the element with fixed position property. If we scroll the page the position of the element is always fixed there only. Note that the top, left, bottom and right property values are calculated from the document page but not from the element location.
Syntax:
position: fixed;
top: value; / left: value; / bottom: value; / right: value;
Example:
In the above example, we applied for position: fixed to the 'Three' box, and give a bottom: 10px; right: 10px; The 'Three' box is moved from the bottom of the page of 10px; and the right of the page of 10px; the 'Three' box is fixed there only even if we scrolling the page. Without leaving any space the 'Four" box came in the place of the 'Three' box.
position: sticky;
An HTML element with position: sticky; acts as position: relative; containing normal flow of the document, when the user scroll the page it behaves as fixed position. The element of this property moved from its actual position to another location according to the top, left, bottom and right property values and it gets stick to the location. The element with sticky position property moves leaving the space of its actual position on the web page without disturbing the postion of other elements. If we scroll the page the position of the element is always stick there only. Note that the top, left, bottom and right property values are calculated from the document page but not from the element location.
Syntax:
position: sticky;
top: value; / left: value; / bottom: value; / right: value;
Example:
In the above example, we applied for position: sticky to the 'Three' box, and give a top: 50px; The 'Three' box is moved from the top of the page of 50px; Without leaving any space the 'Four" box came in the place of the 'Three' box like relative position property,and it stick there only. When we scroll it behaves like fixed.
Thanks for reading my article. Have a great day :-)