Today we're going to look at the position property in CSS.
This property determines an element's placement within a document. The final position of an element is specified by their top, right, bottom, and left properties.
| Property | Value |
|---|---|
position |
static, relative, fixed, absolute and sticky
|
Static
This is the default value of this property. The element is inside the normal flow of the document and the top, right, bottom and left properties have no effect whatsoever on the element.
Relative
The element is in the document's normal flow, and its offset from itself is determined by the values of top, right, bottom, and left. The space assigned for the element in the page layout is the same as it would be if position were static since the offset has no effect on the positions of any other components.
Fixed
An element with this position value is positioned relative to the viewport. The element will always remains in the same location regardless of how far the page is scrolled. The element's position can be adjusted using the top, right, bottom, and left properties.
When an element is fixed, its original place on the page is not left blank. This means that, it is removed from the normal flow of the document.
Absolute
In contrast to fixed elements, which are positioned relative to the viewport, absolute elements are positioned relative to the nearest positioned ancestor.
The document body is used and the element scrolls with the page if an absolute positioned element has no positioned ancestors.
Absolute positioned elements can overlap other elements and are not part of the normal flow.
Sticky
Depending on where the user scrolls, an element with the property position: sticky is placed.
Depending on where you are scrolling, a sticky element switches between being fixed and relative. When a specified offset position is reached in the viewport, it is relative-positioned until that point at which it "sticks" (like position:fixed) in the viewport.
Top comments (0)