Type to generate custom UI components with AI

Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

How to Use Tailwind Position Utility Class for Easy Development

Positioning in CSS can be challenging for developers. For example, the frustrations that arise when elements are not properly positioned as intended. Some senior developers are not left out in this frustration as some of them also struggle with properly positioning elements.

However, Tailwind CSS has introduced some utilities for controlling how an element is positioned in the DOM (Document Object Modal).

In this article, I will walk you through the Tailwind CSS position utility classes, and how to use them. You’ll also learn how to manipulate and control the stacking, alignment, and positioning of elements in your websites. By understanding the fundamentals of positioning with Tailwind CSS, you will discover that positioning elements with Tailwind are less tasking and more interesting to work with.

Let’s dive right in 🚀

Introduction to Tailwind CSS Position Utility Class

Tailwind CSS position utilities control how and where elements or items are placed on your web page or DOM. Just as the name implies, they are generally used in positioning or moving an element from one place to another.

Tailwind CSS also has five positional properties which can be used in positioning an element. These utilities are:

  • static: Statically positioning elements

  • relative: Relatively positioning elements

  • absolute: Absolutely positioning elements

  • fixed: Fixed positioning elements

  • sticky: Sticky positioning elements

I will walk you through the positional property of Tailwind CSS and also in DOM element positioning.

If you are working on a Tailwind CSS project, and you want to be 5x more productive, skip the boring part of writing each piece of code yourself! Check out our AI-generated custom components for Tailwind. This allows you to quickly get started on your project.

Static Positioning

Static positioning is one of the positioning utility classes of Tailwind. It is used to position an element according to the normal flow of the document or web page. This practically means that whenever the static positioning class is applied to an element, nothing changes. The element is not affected by any positioning rules; therefore, it remains in its normal position within the document.

The code below ⬇ demonstrates this:

<!--  Index.html -->
<div>
    <h1 class="text-3xl font-bold text-red-400">
      Tailwind CSS Positioning
    </h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus neque arcu, tincidunt elementum porta ac, suscipit luctus nisi. Fusce mattis pellentesque ullamcorper. Praesent dapibus arcu ut accumsan tempor. Fusce vestibulum libero eu nibh sodales, ac molestie neque cursus. Maecenas semper risus quis est eleifend dictum. Curabitur porta, ante vel maximus rhoncus, leo erat molestie enim, id finibus augue leo eu arcu. Phasellus gravida non odio vel imperd
    </p>
    <br>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus neque arcu, tincidunt elementum porta ac, suscipit position reference luctus nisi. Fusce mattis pellentesque ullamcorper. Praesent dapibus arcu ut accumsan tempor. Fusce vestibulum libero eu nibh sodales, ac molestie neque cursus. Maecenas semper risus quis est eleifend dictum. Curabitur porta, ante vel maximus rhoncus, leo erat molestie enim, id finibus augue leo eu arcu. Phasellus gravida non odio vel imperd
    </p>

    <div class="bg-zinc-300 mx-auto p-3">
      <p class="w-48 bg-red-400 h-32"></p>
    </div>
</div>

From the above ⬆ code, a static position class is added to the p tag along with some other tailwind properties like bg-red-400.

The GIF above shows the result of the static position class added to the p tag. From the image above, we can see that the red rectangular box retained its default position at different screen sizes.

HTML elements have static positioning by default; therefore, you might not necessarily need to add the position static class for them to be positioned in that form, except if you want to override any other positioning class that you might have previously applied to the parent class.

Relative Positioning

Similar to the static position class, the relative position class is also used to position an element relative to its normal (flow) position, taking into account the offsets. Offsets are usually calculated relative to the element’s normal position and the element will act as a position reference for other absolutely positioned children.

When using relative positioning, offsets are defined in relation to the element’s normal position, and the element serves as a point of reference for elements that are positioned absolute.

When the position property is set to a value other than static, offset properties are used to indicate how the element is positioned in relation to its parent element. These offset properties are the top, right, bottom, and left properties. This simply means that the offset properties are only used when elements are positioned relative, absolute, fixed, or sticky to the parent element.

The top property specifies the distance from the top edge of the parent element. The right property specifies the distance from the right edge of the parent element. The bottom property specifies the distance from the bottom edge of the parent element, while the left property specifies the distance from the left edge of the parent element.

<!--  Index.html -->

<div>
  <p class="relative bg-yellow-500 h-24 w-32 m-auto top-24 left-24">Relative</p>
</div>

From the code above, we can see how the relative positioning is used. We applied a top and left class of 24 to the box. This pushes the box 96px far away from the top and left of the web page (offset). These offsets are usually calculated relative to the nearest parent that has a position other than static, and the element will act as a position reference for other absolutely positioned children.

Document Flow with Relative Positioning

<!--  Index.html -->

<div>
  <p class="relative bg-green-500 h-24 w-32 m-auto top-[300px] left-[-300px]">Relative</p>

  <p class="relative bg-yellow-500 h-24 w-32 m-auto">Relative</p>

  <p class="relative bg-red-500 h-24 w-32 m-auto">Relative</p>
</div>

From the code and image above ⬆, we have three boxes with different colors positioned relatively. We set the top of the green box to a value of 300px and the left to a value of -300px. After the positioning of the box happens, we can see that the remaining box (yellow and red) did not move up to occupy the empty space where the green box used to exist. This means that in relative positioning, elements are not removed from the document flow.

Absolute Positioning

We employ absolute position utility class to position an element outside of the normal flow of the document, causing neighboring elements to act as if the element doesn’t exist.

Absolute-positioned elements are positioned differently than the relative-positioned elements. The absolute positioned elements are positioned according to the nearest containing parent element. This means that they are not positioned according to their original position; they’re positioned based on another parent element.

In absolute position, we are always working with two elements, which are the parent element, which takes the relative position, and the inner element, which takes the position absolute property. For instance;

<!--  index.html -->
   <div class="relative bg-red-500 h-96 w-[50%] m-auto">
      <p class="absolute bg-green-500 h-24 w-32 top-[100px] left-[-100px] absolute bottom-0-left bottom-left">Absolute</p>
  </div>

From the code above, we can see that the two elements have a positioning property added to them. The parent div has the relative positioning property, while the inner p is positioned absolute to the parent element. The offset (top, left) property places the box in the exact location we want it to be.

Document Flow with Absolute Positioning

In relative positioning, we said that elements are NOT removed from the document flow, but in absolute, that is not the same. Elements are also removed from the document flow in absolute positioning.

<!--  Index.html -->

  <div class="relative bg-red-500 h-96 w-[50%] m-auto">
    <div class="absolute bg-green-500 h-24 w-32 top-[300px] left-[-200px]">Box 1 (relative parent)</div>

    <p class="absolute bg-yellow-500 h-24 w-32 ">Box 2 (absolute child)</p>

    <p class="absolute bg-blue-400 h-24 w-32 mt-28">Box 3 (absolute child)</p>
  </div>

From the code and image above, we can see clearly how the document flow works with absolute positioning. We created three boxes (box 1, box 2, and box 3). When we added the offset property to box 1 (i.e., top-[300px], left-[-200px]), we could see that box 2 and box 3 moved up to occupy the empty space where box 1 used to exist.

Fixed Positioning

The fixed position utility class is used to position an element relative to the browser window (viewport).

When an element is has the fixed position class, it will remain there even when the page is scrolled. One important thing to note about fixed positioning is that if you resize the browser window, it moves with the browser window, and it will sit in front of all the other content after it. Example;

<!--  Index.html -->

  <nav class="fixed flex justify-between bg-gray-400 m-auto w-[100%] h-10">
    <div>
      <h1>Tailwind css</h1>
    </div>

    <div>
      <a href="Home">Home</a>
      <a href="#">About</a>
      <a href="#">Menu</a>
      <a href="#">Zone</a>
    </div>

    <div>
      <button>Sign in</button>
      <button>Log in</button>
    </div>
  </nav>

  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>

  <div>

    <p>Lorem200</p>
    <br/>

    <p>Lorem200</p>
    <br/>

    <p>Lorem200</p>
    <br/>
  </div>

Demonstating fix position
Demonstating fix position

From the code above, we created a nav bar with some contents like h1, home, about, sign in, log in, etc. In the nav bar, we added the fixed positioning property. This will make the nav bar always be in the viewport even when we scroll.

Document Flow with Fixed Positioning

Just like that of absolute positioning, in fixed positioning, elements are removed from the document flow.

Sticky Positioning

Sticky positioning is a new type of positioning in CSS. It is a hybrid (combination) of the relative and fixed positioning

Sticky position is treated as relative positioned until its containing block crosses a specified point, and at that point, it is treated as fixed positioned. They are useful for creating elements like headers and navigation bars that stick to the top of the viewport when scrolling down a page.

The sticky utility class class is used to set the position of an element as relative until it crosses a specified threshold, then it treats it as fixed until its parent is off-screen.

<!--  Index.html -->

<nav class="sticky flex justify-between bg-gray-400 m-auto w-[100%] h-10">
    <div>
      <h1>Tailwind css</h1>
    </div>

    <div>
      <a href="Home">Home</a>
      <a href="#">About</a>
      <a href="#">Menu</a>
      <a href="#">Zone</a>
    </div>

    <div>
      <button>Sign in</button>
      <button>Log in</button>
    </div>
  </nav>

The code shown above is an example of how we can add sticky positioning to our tailwind project.

It is important to note that since the sticky positioning property is new, it may not work in some older browsers. However, it is widely supported in modern browsers.

How to Apply Position Conditionally

In Tailwind CSS, you can conditionally apply positioning styles to elements using the @apply directive in your CSS. The @apply directives allow you to create more semantic and reusable class combinations.

<!--  Index.html -->

<div class="big-container">
    <div class="inner-child">Inner Child</div>
</div>

The code above is an HTML file; then, we can add a @apply directive to this HTML like this;

/* input.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

.big-container {
  @apply relative;
}

.inner-child {
  @apply absolute top-24 left-32;
}

The code above shows how the @apply directive is used in the positioning of elements in Tailwind CSS. The @apply directive can be reused in another element instead of rewriting a new line of code. This can be done by giving your current element the same class name, just as we did in the previous class

<!--  Index.html -->

<div class="big-container">
    <div class="inner-child">Inner Child</div>
</div>

<div class="inner-child">
  Third Child
</div>

/* input.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

.big-container {
  @apply relative;
}

.inner-child {
  @apply absolute top-24 left-32;
}

The example above shows how we can reuse a style for another component using @apply directives. From the given code snippet, the styling of the second div tag with the Inner Child element is reused in the last div tag.

Note the @apply directive is not specifically tied to positioning alone; it is a powerful feature that helps you keep your styles DRY (Don’t Repeat Yourself) by reusing already existing utility classes.

How to Apply Conditional Utility Classes using Variant Modifiers

When styling items for the web, we can utilize variant modifiers along with @apply directives.

Tailwind CSS’s variant modifiers let you apply utility classes conditionally on various states or breakpoints.

<div class="big-container">
Tailwind CSS Conditional Class
</div>

/* input.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

.big-container {
  @apply relative
  hover: absolute top-0 left-0;
}

From the code above, we can see clearly how the @apply directive is used along with a variant modifier to style an element.

The div element from the example is positioned relative, and when hovered on, it is now positioned absolute with the offset properties of top-0 and left-0.

How to Apply Breakpoints and Media Queries

Breakpoints are responsive screen sizes that are predefined, and they let you style items differently depending on the width of the viewport.

Tailwind CSS makes it simple to create responsive designs by offering default breakpoints for a range of screen sizes.

Some of the breakpoint utility classes used in Tailwind CSS are;

  • sm: Used for all Small Screens at 640px,

  • md: Used for all Medium Screen at 768px,

  • lg: Used for all Large Screens at 1024px,

  • xl: Used for all extra large Screens at 1280px.

  • 2xl: Used for extra large screens at 1536px.

To apply breakpoint classes in your Tailwind CSS project, you can state the responsive class directly in your HTML or in your CSS project. Here is how you can apply them in your HTML:

<div class="relative text-2xl md:absolute lg:absolute md:text-6xl">
This is position relative by default, then position absolute on tablets, and finally, absolutely positioned on larger screens.
</div>

From the code above, the div element is positioned relative, so we applied the breakpoint that at the medium screen, it should be positioned absolute by using md:absolute.

We can also add responsive classes directly in our CSS stylesheet by using Media Queries. Here is how you can do that

.small-screen {
  background-color: green;
  font-size: 50px;
}

/*Applying Responsiveness for small screen*/

@media (min-width:750px) {
  .small-screen {
    background-color: yellow;
    font-size: 80px;
  }
}

If you prefer to learn more about how to use Tailwind CSS breakpoints through video, I have included a YouTube video below;

What You Have Learned

In this article, you have learned that the Tailwind CSS position utility class is one of the many utility classes developed by Tailwind for controlling the positioning, stacking, and alignment of elements within a web page or DOM. It consists mainly of five position utility classes which include the static, relative, absolute, fixed, and sticky classes.

In addition, the @apply directive allows you to create a more semantic and reusable class combination. This helps create clean code and avoid code clusters in your HTML code.

Tailwind CSS Position Utility classes provide a flexible and efficient way to manage element positioning in web development. By understanding these classes and their applications, you can create responsive and dynamic web layouts efficiently.

Other Great Reads from Our Blog

If you enjoyed reading this article, consider other great articles from our blog:

Want to speed up development? Then choose from our repository of 10k+ AI-generated custom components. Save time and increase efficiency while building your dream project.

Emmanuel Uchenna

Emmanuel Uchenna

Emmanuel is an experienced and enthusiastic software developer and technical writer with 4+ proven years of professional experience. He focuses on full-stack web development. He is fluent in React, TypeScript, VueJS, and NodeJS and familiar with industry-standard technologies such as version control, headless CMS, and JAMstack. He is passionate about knowledge sharing.