Layout & Posición — Tailwind Demos

Demo en vivo

relative + absolute

padre: relative

top-3 right-3

bottom-3 left-3

inset-0 centrado

inset — shorthand para top/right/bottom/left

inset-0
= top/right/bottom/left: 0
(ocupa todo el padre)

inset-x-4
= left: 1rem right: 1rem
inset-y-4 = top + bottom

z-index

z-10

z-20

z-30 (encima)

overflow

overflow-hidden

contenido que desborda

overflow-auto

scrolleable

overflow-clip

clip

aspect-ratio

aspect-square

1:1

aspect-video

16:9

sticky

sticky top-0 — se queda arriba al hacer scroll

línea 1 de contenido

línea 2 de contenido

línea 3 de contenido

línea 4 — haz scroll

línea 5 de contenido

línea 6 de contenido

Código importante

<!-- Position -->
static   → defecto (no posicionado)
relative → crea contexto para absolutos
absolute → relativo al ancestro relativo
fixed    → relativo al viewport
sticky   → relativo hasta pegarse

<!-- absolute dentro de relative -->
<div class="relative">
  <div class="absolute top-3 right-3"></div>
  <div class="absolute bottom-0 left-0"></div>

  <!-- inset-0: cubre todo el padre -->
  <div class="absolute inset-0"></div>
</div>

<!-- Centrar absolutamente -->
<div class="absolute
       top-1/2 left-1/2
       -translate-x-1/2 -translate-y-1/2">
</div>

<!-- sticky: se pega en el scroll -->
<nav class="sticky top-0 z-50"></nav>

<!-- z-index -->
z-0  z-10  z-20  z-30  z-40  z-50  z-auto

<!-- overflow -->
<div class="overflow-hidden"></div>
<div class="overflow-auto"></div>
<div class="overflow-scroll"></div>
<div class="overflow-x-auto overflow-y-hidden"></div>

<!-- aspect-ratio -->
<div class="aspect-square"></div>  <!-- 1/1 -->
<div class="aspect-video"></div>   <!-- 16/9 -->
<div class="aspect-[4/3]"></div>  <!-- custom -->

<!-- display -->
<div class="block"></div>
<div class="inline-block"></div>
<div class="hidden"></div>         <!-- display:none -->
<div class="invisible"></div>     <!-- visibility:hidden -->