position

Ejemplos

Posicionar elementos estáticamente

Usa la utilidad static para posicionar un elemento según el flujo normal del documento:

<div class="static ...">
  <p>Padre estático</p>
  <div class="absolute bottom-0 left-0 ...">
    <p>Hijo absoluto</p>
  </div>
</div>

Con elementos posicionados estáticamente, cualquier offset será ignorado y el elemento no actuará como referencia de posición para los hijos posicionados absolutamente.

Posicionar elementos relativamente

Usa la utilidad relative para posicionar un elemento según el flujo normal del documento:

<div class="relative ...">
  <p>Padre relativo</p>
  <div class="absolute bottom-0 left-0 ...">
    <p>Hijo absoluto</p>
  </div>
</div>

Con elementos posicionados relativamente, cualquier offset se calcula en relación con la posición normal del elemento y el elemento actuará como referencia de posición para los hijos posicionados absolutamente.

Posicionar elementos absolutamente

Usa la utilidad absolute para posicionar un elemento fuera del flujo normal del documento, haciendo que los elementos vecinos actúen como si el elemento no existiera:

<div class="static ...">
  <!-- Padre estático -->
  <div class="static ..."><p>Hijo estático</p></div>
  <div class="inline-block ..."><p>Hermano estático</p></div>
  <!-- Padre estático -->
  <div class="absolute ..."><p>Hijo absoluto</p></div>
  <div class="inline-block ..."><p>Hermano estático</p></div>
</div>

Con elementos posicionados absolutamente, cualquier offset se calcula en relación con el padre más cercano que tenga una posición distinta de static, y el elemento actuará como referencia de posición para otros hijos posicionados absolutamente.

Posicionar elementos fijos

Usa la utilidad fixed para posicionar un elemento en relación con la ventana del navegador:

Desplaza este elemento para ver el posicionamiento fijo en acción

Contactos

Andrew Alfred

Debra Houston

Jane White

Ray Flint

Mindy Albrect

David Arnold

<div class="relative">
  <div class="fixed top-0 right-0 left-0">Contactos</div>
  <div>
    <div>
      <img src="/img/andrew.jpg" />
      <strong>Andrew Alfred</strong>
    </div>
    <div>
      <img src="/img/debra.jpg" />
      <strong>Debra Houston</strong>
    </div>
    <!-- ... -->
  </div>
</div>

Con elementos posicionados fijos, cualquier offset se calcula en relación con el viewport y el elemento actuará como referencia de posición para los hijos posicionados absolutamente:

Posicionar elementos sticky

Usa la utilidad sticky para posicionar un elemento como relative hasta que cruce un umbral especificado, luego trátalo como fixed hasta que su padre esté fuera de la pantalla:

Desplaza este elemento para ver el posicionamiento sticky en acción

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 class="sticky top-0 ...">A</div>
    <div>
      <div>
        <img src="/img/andrew.jpg" />
        <strong>Andrew Alfred</strong>
      </div>
      <div>
        <img src="/img/aisha.jpg" />
        <strong>Aisha Houston</strong>
      </div>
      <!-- ... -->
    </div>
  </div>
  <div>
    <div class="sticky top-0">B</div>
    <div>
      <div>
        <img src="/img/bob.jpg" />
        <strong>Bob Alfred</strong>
      </div>
      <!-- ... -->
    </div>
  </div>
  <!-- ... -->
</div>

Con elementos posicionados sticky, cualquier offset se calcula en relación con la posición normal del elemento y el elemento actuará como referencia de posición para los hijos posicionados absolutamente.

Diseño Responsive

Prefija una utilidad position con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

<div class="relative md:absolute ...">
  <!-- ... -->
</div>

Aprende más sobre el uso de variantes en la documentación de variantes.