Posicionamiento y capas

1.El flujo normal y por qué a veces hay que salirse

Por defecto, los elementos se colocan uno tras otro, de arriba abajo (los de bloque) y de izquierda a derecha (los de línea). Es el flujo normal y casi siempre es lo que quieres.

La propiedad position permite sacar un elemento del flujo o ajustarlo, para casos concretos: una insignia sobre una foto, un menú que se queda arriba al desplazarte, un cuadro de diálogo sobre toda la página. No sirve para maquetar columnas: para eso están Flexbox y Grid (lecciones 6 y 7).

2.relative: ajustar y servir de referencia

position: relative casi no cambia nada visible por sí solo. Su verdadero valor es otro: convierte al elemento en la referencia de los hijos con position: absolute.

.tarjeta { position: relative; }          /* la referencia */
.insignia {
  position: absolute;                     /* sale del flujo */
  top: 12px;                              /* a 12px del borde superior de .tarjeta */
  right: 12px;                            /* y a 12px del derecho */
}

3.absolute: colocar con precisión

Con top, right, bottom, left (o el atajo inset) indicas la distancia a los bordes de la referencia. Algunos usos habituales:

.padre { position: relative; }
.hijo {
  position: absolute;
  inset: 0;                 /* top, right, bottom y left: 0 → llena el padre */
  margin: auto;             /* con ancho y alto definidos, queda centrado */
  width: 120px; height: 60px;
}

/* La otra manera clásica */
.hijo2 {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

4.fixed y sticky

.boton-flotante { position: fixed; right: 16px; bottom: 16px; }

.encabezado {
  position: sticky;
  top: 0;                    /* se pega al borde superior al desplazar */
  background: #fff;
  z-index: 10;
}

5.z-index y apilamiento

Los elementos posicionados pueden superponerse. z-index decide quién queda encima: un número mayor se ve por delante. Solo funciona en elementos con position distinto de static (y en ítems de flex/grid).

Contextos de apilamiento: la trampa del z-index

Cada elemento con ciertas propiedades (position + z-index, opacity < 1, transform, filter…) crea un contexto de apilamiento: un «mundo aparte» donde los z-index de dentro no compiten con los de fuera. Por eso a veces un z-index: 9999 no logra pasar por encima de otro elemento.

• Un hijo nunca puede salir por encima de lo que está por encima de su contexto de apilamiento.
• Usa valores pequeños y ordenados (1, 10, 100) y nómbralos con variables: --z-menu: 10; --z-modal: 100;.
• Si no logras superponer algo, busca un ancestro con transform, opacity o position + z-index que cree un contexto.

6.Un caso completo: el cuadro modal

Un modal combina todo lo anterior: una capa fija que cubre la pantalla, un contenido centrado y un z-index alto:

7.float: una pieza de historia

float hacía que un elemento se desplazara a un lado y el texto lo rodeara, como en una revista. Hoy se usa solo para eso: imágenes con texto alrededor. Para maquetar se usa Flexbox o Grid.

.foto-lateral { float: left; margin: 0 16px 8px 0; width: 160px; }
.despues { clear: both; }      /* el siguiente bloque ya no rodea la imagen */

8.Errores frecuentes

• Usar position: absolute para todo el diseño: se rompe en cuanto cambia el tamaño de pantalla o el contenido.
• Olvidar position: relative en el padre: la insignia se coloca respecto a la página.
• z-index sin position: no hace nada (salvo en flex/grid).
• Subir el z-index a 99999: no resuelve un contexto de apilamiento.
• sticky sin top o con un ancestro con overflow.
• Un elemento fixed tapa el contenido: deja espacio con padding en el body.
• Colocar con top/left en px en tamaños críticos: usa %, inset o unidades relativas.

9.Glosario