Tailwind Position

The position utility class in Tailwind CSS allows you to control the positioning behavior of an element within its containing parent or the entire viewport. With Tailwind's position class, you can easily manipulate the placement of elements on your web page.

Applying Position

To apply a specific position to an element, you can use the position-{value} utility class, where {value} represents the desired position. The available position values are:

• static: The default position value that follows the normal flow of the document. Elements with position-static are not affected by top, bottom, left, right, or z-index properties.
• fixed: Positions the element relative to the viewport. It remains fixed even when the page is scrolled.
• absolute: Positions the element relative to its nearest positioned ancestor. If no ancestor is positioned, it is positioned relative to the initial containing block (usually the viewport).
• relative: Positions the element relative to its normal position in the document flow.
• sticky: Positions the element relative to the viewport until a specified threshold is met, then behaves like position-relative.
• fixed inset-{value}: Positions the element with an inset value relative to the viewport edges, where {value} represents the distance from the respective edge.
• absolute inset-{value}: Positions the element with an inset value relative to its containing parent or the initial containing block.

Here's an example:

<div class="relative">
  <p>Relative</p>
  <p class="static">static</p>
  <p class="absolute top-0 left-0">absolute</p>
</div>

Preview

Responsive Position

Tailwind CSS allows you to apply position classes responsively at different breakpoints. To use responsive position classes, you can append the breakpoint prefix to the utility class. For example, md:absolute sets the position to absolute starting from the medium breakpoint and above.

<div class="relative md:absolute">
  <!-- Content here -->
</div>

In the above example, the position of the <div> element is set to relative by default, but starting from the medium breakpoint and above, it changes to absolute.

Tailwind Position Class Table

Windframe Tailwind blocks

landing page