Why we use position in CSS ?

• The position is css specifies how an element is positioned in the document. It decides whether the element is positioned in natural flow of the document or it is not positioned in the natural flow of the document. The final position of the element is decided by giving the value of top, right, bottom, left. There are five values of position based on which the element is positioned in the document.
• Static
• Relative
• Absolute
• Fixed
• Sticky
• Let's understand each in some details. The syntax for defining the position in the HTML document is given below

  position:value
  

Static position

• It is the default position of every element in the document. The element is positioned in the normal flow of the document and if we give the properties like top, right, bottom, left than it has no effect on the position of the element. Let's understand this with an example.

[Codepen]

Relative position

• In relative position the elements is positioned according to the normal flow of the document and the element changes its position relative to its original position based on the values of top, right, bottom and left . The offset does not affect the position of any other element and a space is created in the place of element. Let's understand relative position with an example.

[Codepen]

Absolute position

• In absolute position the element is removed from the normal flow of the document as if there was no element in that place and the other elements takes that empty space. In absolute position the element positioned relative to its parent if any otherwise it is positioned relative to its containing block based on the value of top, right, bottom and left. The important thing in absolute position is that it will be positioned relative to its parent only if the parent is positioned based on absolute, relative, fixed or sticky position otherwise it will be positioned relative to the body. Let's understand with an example. In the below example the element positioned relative to the body as parent is not given any position value.

[Codepen]

• If the parent is given position : relative than the element will be positioned relative to the parent as shown in the example below.

[Codepen]

Fixed position

• In fixed position the element is removed from the original flow of the document and there will be no space created in the page layout. The element is positioned relative to the body of the HTML document irrespective of the position of the parent. The final position of the element is decided based the value of top, right, bottom and left.The element will remain fixed to that position even if scroll down the webpage. Let's understand this with an example.

[Codepen]

Sticky position

• In sticky position the element is positioned based on the normal flow of the document and when sticky position is applied to that element than it will positioned relative to its nearest scrolling parent and its containing block based on the value of top, right, bottom and left. Lets understand this with an example.

[Codepen]

• This is the end of the article. Hope you enjoyed reading it. Please comment below for any suggestions to improve my content and writing style.

  via GIPHY