Tailwind CSS 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

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.