The position property in CSS describes about the positioning style for an element.
The Position Property
There are five different position values:
- static
- relative
- fixed
- absolute
- sticky
position: static;
Every element is positioned static by default.
An element with position: static;
is not affected by top
, bottom
, left
and right
properties.
It is always positioned according to the normal flow of the page.
Example:
/* consider a div with class= "static" */
div.static {
position: static;
border: 3px solid blue
}
position: relative;
An element with position: relative;
still positioned according to the normal flow of the page, but also affected by the top
, bottom
, left
and right
properties.
Setting up the top
, bottom
, left
and right
properties of a relatively-positioned element will cause it to be adjusted away from its normal position.
Example:
/* Consider an element div of class="relative" */
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
position: fixed;
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 top, right, bottom, and left properties are used to position the element.
A fixed element does not leave a gap in the page where it would normally have been located.
Example:
position: absolute;
An element with position: absolute;
is positioned relative to the parents element (instead of positioned relative to the viewport
, like fixed
).
However; if an absolute positioned element has no positioned parents, it uses the document body, and moves along with page scrolling.
Example:
position: sticky;
An element with position: sticky;
is positioned based on the user's scroll position.
A sticky element toggles between
relative
andfixed
, depending on the scroll position.
It is positioned relative
until a given offset position is met in the viewport
- then it "sticks"
in place (like position :fixed
).
Example: