Position

Basic usage

Statically positioning elements

Use static 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.

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

Relatively positioning elements

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

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

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

Absolutely positioning elements

Use absolute to position an element outside of the normal flow of the document, causing neighboring elements to act as if the element doesn't exist.

Offsets are 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.

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

Fixed positioning elements

Use fixed to position an element relative to the browser window.

Offsets are calculated relative to the viewport and the element will act as a position reference for absolutely positioned children.

Contacts

Andrew Alfred

Debra Houston

Jane White

Ray Flint

Mindy Albrect

David Arnold

<div className="relative">
  <div className="**fixed** top-0 left-0 right-0">Contacts</div>
  <div>
    <div>
      <img src="..." />
      <strong>Andrew Alfred</strong>
    </div>
    <div>
      <img src="..." />
      <strong>Debra Houston</strong>
    </div>
    <!-- ... -->
  </div>
</div>

Sticky positioning elements

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

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

A

Andrew Alfred

Aisha Houston

Anna White

Andy Flint

B

Bob Alfred

Bianca Houston

Brianna White

Bert Flint

C

Colton Alfred

Cynthia Houston

Cheyenne White

Charlie Flint

<div>
  <div>
    <div className="**sticky top-0** ...">A</div>
    <div>
      <div>
        <img src="..." />
        <strong>Andrew Alfred</strong>
      </div>
      <div>
        <img src="..." />
        <strong>Aisha Houston</strong>
      </div>
      <!-- ... -->
    </div>
  </div>
  <div>
    <div className="**sticky top-0**">B</div>
    <div>
      <div>
        <img src="..." />
        <strong>Bob Alfred</strong>
      </div>
      <!-- ... -->
    </div>
  </div>
  <!-- ... -->
</div>