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.
From web4college, the free CSS digger
#First 1
