CSS Position Property Explained!


We struggle a lot while positioning elements in the right place on the webpage. Sometimes we also find that top/left/bottom/right has no effect on the element. The position property of CSS controls the positioning of elements on the webpage and their behavior. It also influences other elements of the webpage.

Position property ca


Today, we are going to look into the position property and its different values in CSS.

Position in CSS Property

The position property specifies the type of positioning method used for an element.

It defines the position of an element in the document. The element is positioned top, left, bottom and right according to the properties defined. They worked differently with a different values. Sometimes they depend on the parent element’s position for the positioning of the element. While they work independently.

Position property defined the type of position to use as value. There are 5 major key values of the position property

  • Static
  • Absolute
  • Relative
  • Fixed
  • Sticky


An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page


It is the default value of the position property. The element is rendered in order of placement. It doesn’t break the flow of the document. top/left/bottom/right attributes don’t work with static position property.


Why use: It will scale on all browser


An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).


The element is removed from the normal flow of the document. Other elements will behave as if it’s not even there in the document. All the position property will work. Absolute positioned elements are relative to their parent element.


Why use: Use when to position element according to the parent element


An element with position: relative; is positioned relative to its normal position.


The element is positioned relative to its normal position. It acts as a static element. Now, the top/left/bottom/right attribute will work on the element. It is mostly used for the parent elements.


Why use: Use for parent element of an absolute positioned element


An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.


The fixed position element is the same as the absolute position. They are removed from the normal flow of the document. But unlike absolute position elements, they are always relative to the HTML tag.


Why use: Use when you want the header to be fixed on the top of the viewport.


An element with position: sticky; is positioned based on the user’s scroll position.


The sticky position is unique. It behaves according to scroll. If you scroll past the element, it will stick to the position. After that, it will work as a fixed element.


Click here for the live-action of the sticky position property.

Why use: When you want something to stick after a certain click like Buy NowLog in.


I hope now you will be able to position the element according to your need without much frustration. Thank you are reading the blog post.


🔗 Connect with me:

Twitter GitHub


Leave a Reply