Tailwind CSS Position

Statically positioning elements

Use .static class to position an element according to the normal flow of the document.

Any offsets will be ignored and the element will not act as a position reference for absolutely positioned children.

Static parent

Absolute child

HTML

        
            
        <div class="... static">
          <p>Static parent</p>
          <div class="... absolute bottom-0 left-0">
            <p>Absolute child</p>
          </div>
        </div>

Relatively positioning elements

Use .relative class that allows the element to be positioned relative to its normal position in the document flow.

Any offsets are calculated relative to the element’s normal position and the element will act as a position reference for absolutely positioned children.

Relative parent

Absolute child

HTML

        
            
        <div class="... relative">
          <p>Relative parent</p>
          <div class="... absolute bottom-0 left-0 ">
            <p>Absolute child</p>
          </div>
        </div>

Absolutely positioning elements

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>

Fixed positioning elements

To create an element with a fixed position in Tailwind, you can use the .fixed class. The fixed class positions the element relative to the viewport, which means it will stay in the same position even if the user scrolls the page.

Contacts

Corey Anderson

Ray Flint

John Smith

Maria Samantha

Mindy Albrect

Lisa Cudrow

Emily Williams

HTML

        
            
        <div class="relative">
          <div class="fixed left-0 right-0 top-0">Contacts</div>
          <div>
            <div>
              <img src="..." />
              <strong>Ray Flint</strong>
            </div>
            <div>
              <img src="..." />
              <strong>Emily Williams</strong>
            </div>
            <!-- ... -->
          </div>
        </div>

Sticky positioning elements

Use .sticky class to position an element as relative until it crosses a specified threshold, then treat it as fixed until its parent is off screen.

Any offsets are calculated relative to the element’s normal position and the element will act as a position reference for absolutely positioned children.

A

Abigail Davis

Alexander Lee

Amelia Collins

Andrew Carter

B

Benjamin Hughes

Bradley Wood

Brianna White

Brittany Campbell

C

Caleb Adams

Catherine James

Charlotte Gray

Corey Bailey

HTML

        
            
        <div>
          <div>
            <div class="... sticky top-0">A</div>
            <div>
              <div>
                <img src="..." />
                <p>Abigail Davis</p>
              </div>
              <!-- ... -->
              <div>
                <img src="..." />
                <p>Andrew Carter</p>
              </div>
            </div>
          </div>
          <div>
            <div class="sticky top-0">B</div>
            <div>
              <div>
                <img src="..." />
                <p>Benjamin Hughes</p>
              </div>
              <!-- ... -->
            </div>
          </div>
          <!-- ... -->
        </div>

Position

Statically positioning elements

Relatively positioning elements

Absolutely positioning elements

Fixed positioning elements

Sticky positioning elements

Access restricted

To view this section you must have an active PRO account

Position

Tailwind CSS Position

Statically positioning elements

Relatively positioning elements

Absolutely positioning elements

Fixed positioning elements

Sticky positioning elements

Related resources