Utilities for controlling how an element is positioned in the DOM.
static
: This is the default positioning value for an element. It means the element will follow the normal flow of the document and won't be affected by the top
, right
, bottom
, and left
properties.fixed
: The element is positioned relative to the viewport. It stays in the same position even when the page is scrolled.absolute
: The element is positioned relative to its nearest positioned ancestor (an ancestor with a position other than static
). If no positioned ancestor is found, it is positioned relative to the initial containing block (usually the viewport).relative
: The element is positioned relative to its normal position in the document flow. It will still occupy space in the normal flow.sticky
: The element is positioned based on the user's scroll position. It becomes "stuck" when it reaches a specified scroll position, and it remains in that position as long as the user continues to scroll.Example