CSS position property

Description

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.

Syntax

position : static | relative | absolute | sticky | fixed

Property values

staticDefault

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

There is no effect of top and right properties.

position: static;

relative

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;

absolute

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

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;

fixed

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?

 
arrow

#First 1

×

Ctrl+D