position

Ejemplos

Posicionamiento estático de elementos

Utiliza la utilidad static para posicionar un elemento de acuerdo con 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 desplazamiento (offset) será ignorado y el elemento no actuará como referencia de posición para los hijos posicionados absolutamente.

Posicionamiento relativo de elementos

Utiliza la utilidad relative para posicionar un elemento de acuerdo con 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 desplazamiento (offset) se calcula en relación con la posición normal del elemento, y este actuará como referencia de posición para los hijos posicionados absolutamente.

Posicionamiento absoluto de elementos

Utiliza 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 desplazamiento (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.

Posicionamiento fijo de elementos

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

Desplázate por 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 desplazamiento (offset) se calcula en relación con la ventana de visualización (viewport) y el elemento actuará como referencia de posición para los hijos posicionados absolutamente:

Posicionamiento pegajoso (sticky) de elementos

Utiliza 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:

Desplázate por este elemento para ver el posicionamiento pegajoso 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 de manera pegajosa (sticky), cualquier desplazamiento (offset) se calcula en relación con la posición normal del elemento, y este actuará como referencia de posición para los hijos posicionados absolutamente.

Diseño responsivo

Antepone a la utilidad position el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:

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

Obtén más información sobre el uso de variantes en la documentación de variantes.