Posicionamiento CSS y Sistemas de Coordenadas

Demo en Vivo: Cambiar Modos de Posicionamiento

Elige un valor de position y arrastra los controles deslizantes. La caja roja se reposiciona y la lectura de coordenadas te muestra exactamente donde esta su punto de origen y como top/left se traducen a desplazamientos de pixeles. Esta es la forma mas rapida de interiorizar la diferencia entre relative y absolute.

Posicionamiento como Sistema de Coordenadas, No Regla de Layout

Aqui esta el cambio mental que hace que el posicionamiento CSS haga clic: top, right, bottom y left son coordenadas, no margenes. Cuando escribes top: 50px, estas colocando el elemento 50 pixeles por debajo de un punto de origen especifico. La pregunta es: origen de que?

Cada elemento posicionado vive dentro de un containing block (bloque contenedor) -- la caja que define su origen de coordenadas. Piensalo como el punto (0, 0) para ese elemento. El containing block es diferente segun el valor de position que uses, y esa es la cosa mas confusa del posicionamiento CSS.

Para position: absolute y position: fixed, el elemento se elimina por completo del flujo normal del documento. Sus coordenadas se miden contra el containing block, no contra sus hermanos o padre en el flujo normal. Por eso un elemento absolutamente posicionado puede superponer otro contenido -- ha dejado el sistema de coordenadas del flujo del documento.

Los Cinco Valores de position, Desde una Perspectiva de Coordenadas

La tabla anterior es la referencia. Ahora desempaquetemos las tres cosas que causan mas confusion en el mundo real.

Containing Block: El Concepto que la Mayoria de Tutoriales Omite

Si te llevas una cosa de esta pagina, que sea esta: position: absolute no es relativo al elemento padre. Es relativo al ancestro posicionado mas cercano -- el primer ancestro subiendo por el arbol que tiene position con un valor distinto a static.

Esto engania a todo el mundo la primera vez. Pones position: absolute en un hijo, estableces top: 0; left: 0;, y el elemento vuela a la esquina de la pagina en lugar de la esquina del padre. La razon: el padre tiene position: static (por defecto), asi que el navegador sube por el arbol buscando un ancestro posicionado, no encuentra ninguno, y usa el viewport como containing block.

  
  
I am lost

La solucion es siempre la misma: anade position: relative al padre. Esto establece al padre como containing block, y ahora el top/left del hijo se miden desde el borde de padding del padre.

  
  
I am anchored

La Trampa del transform

Aqui hay un problema que ha hecho perder horas a los desarrolladores: si pones transform, perspective, filter, backdrop-filter, will-change: transform o contain: paint en un elemento, se convierte en el containing block de todos los descendientes con position: fixed. No solo hijos directos -- cualquier descendiente.

Esto significa que tu barra de navegacion de posicion fija de repente se desplaza con la pagina en lugar de quedarse quieta, porque algun ancestro 10 niveles arriba tiene un transform: translateZ(0) para aceleracion GPU. La solucion es entender que crea containing blocks:

/* This ancestor looks innocent... */
.site-wrapper {
  transform: translateZ(0); /* GPU optimization */
}

/* ...but it hijacks fixed positioning for ALL descendants */
.nav {
  position: fixed;
  top: 0;
  /* BUG: this is now relative to .site-wrapper,
     not the viewport. It scrolls with the page. */
}

Las propiedades que crean un containing block para descendientes position: fixed: transform, perspective, filter, backdrop-filter (donde se soporta), will-change con valor transform/perspective/filter, y contain: paint o contain: layout. Si tu elemento fixed se comporta mal, sube por el DOM y busca estas propiedades.

Stacking Contexts: El Sistema de Coordenadas del Eje Z

El posicionamiento maneja X e Y. z-index maneja Z -- pero no funciona como la mayoria piensa. z-index solo funciona dentro de un stacking context (contexto de apilamiento), y un stacking context no es lo mismo que el documento.

Piensa en un stacking context como una capa aislada. Los elementos dentro pueden apilarse relativamente entre si, pero la capa entera se posiciona como una unidad contra otras capas. Asi que un z-index: 9999 dentro de un stacking context puede seguir detras de un z-index: 1 en un stacking context diferente de nivel superior.

Que crea un stacking context?

• El elemento raiz (<html>)
• position: absolute o position: relative con z-index distinto de auto
• position: fixed o position: sticky (siempre, independientemente del z-index)
• Cualquier elemento con opacity menor que 1
• Cualquier elemento con transform, filter, perspective, backdrop-filter o will-change
• mix-blend-mode distinto de normal
• isolation: isolate

La consecuencia practica: si tu modal con z-index: 9999 aparece detras de un dropdown con z-index: 10, casi seguramente es porque el modal esta dentro de un stacking context (creado por un transform o opacity en un ancestro) que a su vez esta por debajo del stacking context del dropdown. No puedes arreglarlo subiendo el z-index del modal -- necesitas sacar el modal del stacking context del ancestro, o eliminar la propiedad que lo crea.

Unidades de Viewport y Posicionamiento Responsivo

Cuando usas position: fixed o position: absolute con desplazamientos porcentuales, esos porcentajes son relativos a las dimensiones del containing block, no al tamano del propio elemento. top: 50% significa 50% de la altura del containing block.

Las unidades de viewport te permiten posicionar relativo a la ventana real del navegador:

Las unidades dvh / dvw / svh / lvh son mas nuevas y resuelven el problema de Safari movil donde 100vh incluye el area detras de la barra de URL, causando que el contenido se corte. Usa 100dvh en lugar de 100vh para elementos que deben llenar el viewport visible.

Patrones del Mundo Real que Funcionan

Overlay de Modal Centrado

El patron para un modal centrado que funciona en todas partes. La clave es combinar position: fixed con inset: 0 (abreviatura de los cuatro lados) y place-items: center:

.modal-backdrop {
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  background: rgba(0,0,0,.5);
  display: grid;
  place-items: center; /* centers the modal */
  z-index: 1000;
}
.modal {
  background: #fff;
  border-radius: 12px;
  padding: 2rem;
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
}

Encabezado de Tabla Sticky

position: sticky en un encabezado de tabla es la forma mas limpia de mantener las etiquetas de columna visibles durante el scroll. El truco: top: 0 define cuando se pega, y el contenedor de scroll debe ser el padre de scroll de la tabla:

.table-scroll {
  max-height: 400px;
  overflow: auto;
}
.table-scroll thead th {
  position: sticky;
  top: 0;
  background: #fff; /* must be opaque */
  z-index: 1;
}

Tooltip al Pasar el Mouse

El patron padre relative / hijo absolute para tooltips. El tooltip esta oculto por defecto y se revela al pasar el mouse:

.tooltip-trigger {
  position: relative; /* containing block for tooltip */
  display: inline-block;
}
.tooltip {
  position: absolute;
  bottom: 100%; /* sits above the trigger */
  left: 50%;
  transform: translateX(-50%); /* horizontal center */
  margin-bottom: 8px;
  padding: .5rem .75rem;
  background: #1a1a1a;
  color: #fff;
  border-radius: 6px;
  font-size: .85rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.tooltip-trigger:hover .tooltip {
  opacity: 1;
}

Marco de Decision: Que position Usar

FAQ