CSS Position

In CSS the position property can be used to specify the positioning method we will use for any element.

The different values for this property are:

  • static
  • relative
  • fixed
  • absolute
  • sticky

Only when the position property is set once, the elements can be positioned using the top, bottom, left, and right properties.

Let’s now take a look at different position values


By default all the HTML elements are positioned static. Elements with such positioning cannot be affected by altering the top, bottom, left, and right properties.



This positions the element relative to its default/normal position.

We can set the top, bottom, left and right properties to adjust them away from the normal positions.



This is done to keep the element fixed even when the page is being scrolled.

Once the position is set as fixed, you can position the element using the left, right, top and bottom properties.



This value is used to position the element with respect to its ancestral element.

However, if there’s no ancestral element, the absolute works just like the fixed value.



This is, somewhat, a mix of the relative and the fixed values.

The element with sticky positioning moves up and down with the scroller as long as it does not hit the viewport offset.

In simpler words, as you scroll up, the element will move just like any other element until it meets the top edge of the viewport.

After that, it acts like a fixed positioned element.



Positioning can cause the element to overlap in certain situations.

However, we can decide that which element should be on the top of the overlapping stack using the property called, z-index.

Thus if you give a positive value, the element will be at the front (top of the stack) and vice-versa.