Utilities for controlling how an element is positioned in the DOM.

  1. 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.
  2. fixed: The element is positioned relative to the viewport. It stays in the same position even when the page is scrolled.
  3. 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).
  4. relative: The element is positioned relative to its normal position in the document flow. It will still occupy space in the normal flow.
  5. 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

Untitled

LIVE DEMO

https://play.tailwindcss.com/3PFiGVIIv3