Position

Static

Initial value

The element is positioned according to the normal flow of the document, and top, right, bottom, and left properties have no effect.

<div class="tc-white">
  <div class="bg-indigo p-4 p-s">Static Position</div>
  <div class="bg-indigo-2 p-4 tc-slate">Another Element</div>
</div>

Absolute

The element is positioned relative to its nearest positioned ancestor (not static), allowing for precise placement.

<div class="bg-indigo-2 h-32 p-4 p-r tc-white">
  <div class="bg-indigo l-4 t-4 p-4 p-a">Absolute Position</div>
</div>

Fixed

The element is positioned relative to the viewport, meaning it stays in the same place even when the page is scrolled.

<div class="tc-white">
  <div class="bg-indigo r-4 t-4 p-4 p-f">Fixed Position</div>
  <div class="bg-indigo-2 h-s p-4 tc-white">Scroll down to see the fixed element.</div>
</div>

Relative

The element is positioned relative to its normal position, allowing for adjustments without affecting the layout of surrounding elements.

<div class="tc-white">
  <div class="bg-indigo l-4 t-4 p-4 p-r">Relative Position</div>
  <div class="bg-indigo-2 p-4 tc-slate">Another Element</div>
</div>

Sticky

The element is treated as relative until it crosses a specified threshold, at which point it is treated as fixed.

<div class="bo-1 h-64 o-y-s tc-white">
  <div class="bg-indigo t-0 p-4 p-st">Sticky Position</div>
  <div class="bg-indigo-2 h-96 p-4 tc-slate">Scroll down to see the sticky behavior.</div>
</div>

Using utility variants

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Targeting different viewports

Targeting hover states