Position absolute

Tailwind CSS Position absolute

Use responsive position absolute utilities with TW elements. Learn to place an element outside of the normal document flow in simple way.

Basic example

In order to position an element outside of the regular flow of a document and have its neighboring elements behave as if the element is not present, one can make use of .absolute class.

With static positioning

Relative parent

Static parent

Static child

Static sibling

With absolute positioning

Relative parent

Static parent

Absolute child

Static sibling

HTML

        
            
        <div class="... static">
          <!-- Static parent -->
          <div class="... static"><p>Static child</p></div>
          <div class="... inline-block"><p>Static sibling</p></div>
          <!-- Static parent -->
          <div class="... absolute"><p>Absolute child</p></div>
          <div class="... inline-block"><p>Static sibling</p></div>
        </div>

Position absolute

Tailwind CSS Position absolute

Basic example

Access restricted

To view this section you must have an active PRO account

Position absolute

Tailwind CSS Position absolute

Basic example

Related resources