CSS position property


CSS position property specifies the position of an element i.e. the position of an element should be either relative to its original position or with respect to parent box.

The parent must be positioned. And we are applying top:30px; and right:30px; to reposition the current element.


position : static | relative | absolute | sticky | fixed

Property values


In this case, the element does not change the position.

There is no effect of top and right properties.

position: static;


It replaces the element with respect to its original position.

In this case, child element moves 30px both leftwards and downwards from its original position.

position: relative;


It replaces the element with respect to its parent box.

The child element is 30px away from both the top and right sides of parent box.

position: absolute;


sticky value fixes the position of the current box with respect to the parent box and not with respect to viewport.

Please move the scrollbar to understand this 'sticky' value.

position: sticky;


It fixes the element with respect to viewport.

position: fixed;

Applicable to

It applies to all elements except table-column and table-column-group.

#CSS digger
Was this article helpful?


#First 1