Positioning: El Flujo y su Ruptura

Controla la ubicación exacta de los elementos. Aprende cuándo mantener el flujo y cuándo romperlo para crear layouts dinámicos.

Tipos de Posicionamiento

  • Static: El valor por defecto. Sigue el flujo natural.
  • Relative: Se desplaza respecto a su posición original sin afectar a los demás.
  • Absolute: Se posiciona respecto al ancestro posicionado más cercano.
  • Fixed: Siempre visible respecto al viewport.
  • Sticky: Híbrido entre relative y fixed según el scroll.

Contexto Z-Index

Recuerda que `z-index` solo funciona en elementos con `position` distinto de `static`. Crea un nuevo contexto de apilamiento.

Visualizador de Posiciones

Relative
Absolute

Interactive Position Lab