Estilos CSS: Posicionamiento, z-index y diseño responsive

Hasta ahora hemos trabajado con elementos que viven en el flujo normal del documento. El posicionamiento rompe ese flujo: te permite anclar una cabecera al viewport, superponer un modal, desplegar un menú o fijar una barra lateral mientras el usuario hace scroll. Combinado con z-index y las media queries, el posicionamiento es la base de las interacciones dinámicas y del diseño adaptable.

Esta es la quinta entrega de la serie Estilos CSS. Cubriremos los cinco valores de position, los contextos de apilamiento con z-index y los fundamentos del diseño responsive.

La propiedad position

La propiedad position acepta cinco valores que cambian cómo se ubica un elemento:

• static (por defecto) — el elemento permanece en el flujo normal.
• relative — se desplaza respecto a su posición original sin salir del flujo.
• absolute — se extrae del flujo y se posiciona respecto a su ancestro posicionado más cercano.
• fixed — se extrae del flujo y se posiciona respecto al viewport.
• sticky — combina relative y fixed según el scroll.

Las propiedades top, right, bottom y left controlan la ubicación (y, en algunos casos, el tamaño) de los elementos posicionados.

Fixed: anclado al viewport

position: fixed extrae el elemento del flujo normal —los demás se reorganizan como si no existiera— y lo ancla a una posición relativa al viewport, donde permanece aunque el usuario haga scroll. Es la base de los modales: un fondo semitransparente que cubre toda la pantalla y un cuerpo centrado encima.

.modal-backdrop {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-body {
  position: fixed;
  top: 3em; bottom: 3em; right: 20%; left: 20%;
  background-color: white;
  overflow: auto;
}

Absolute: relativo al ancestro posicionado

position: absolute también extrae el elemento del flujo, pero se posiciona respecto al primer ancestro que tenga una posición distinta de static. Si ningún ancestro está posicionado, usa el bloque contenedor inicial (el tamaño del viewport).

Este es el patrón para colocar un botón de cierre en la esquina de un modal: el padre se marca como position: relative y el botón como position: absolute.

.modal-body  { position: relative; }
.modal-close { position: absolute; top: 0.3em; right: 0.3em; }

Relative: desplazamiento sin salir del flujo

A diferencia de los anteriores, position: relative no extrae el elemento del flujo; lo traslada respecto a su posición original, dejando su hueco intacto. Tampoco permite redimensionarlo con la combinación de lados.

Su uso más frecuente es establecer un bloque contenedor para descendientes absolutos. Es la base de un menú desplegable: el contenedor es relative y el menú es absolute, mostrándose con :hover.

.dropdown { position: relative; display: inline-block; }

.dropdown-menu { position: absolute; top: 100%; left: 0; display: none; }

.dropdown:hover .dropdown-menu { display: block; }

Sticky: lo mejor de relative y fixed

position: sticky mantiene el elemento en su posición normal hasta que, al hacer scroll, alcanza el umbral definido por top/bottom; en ese momento se “pega” como si fuera fixed. Cuando el contenido vuelve, recupera su comportamiento relativo. Es ideal para barras laterales y cabeceras de sección que deben permanecer visibles.

.afijo { position: sticky; top: 1em; }

Stacking contexts y z-index

Cuando varios elementos posicionados se solapan, z-index controla el orden de apilamiento en el eje Z. Acepta enteros positivos y negativos: a mayor valor, más al frente.

.uno { position: relative; z-index: 1; }
.dos { position: relative; z-index: 2; }  /* queda por encima de .uno */

Aquí está la trampa que confunde a muchos: cada elemento posicionado con z-index crea su propio contexto de apilamiento. Un hijo dentro de un contexto con z-index: 1 nunca podrá superar a un elemento de un contexto hermano con z-index: 2, aunque el hijo tenga z-index: 99999.

Responsive: estilos que se adaptan

La enorme variedad de pantallas obliga a diseñar interfaces que respondan a distintos tamaños. La filosofía mobile first consiste en escribir primero los estilos para móvil y luego ampliarlos progresivamente hacia tablets y escritorio.

Media queries

Una media query aplica un bloque de CSS solo cuando se cumple una condición sobre el viewport. Conviene usar em en los umbrales para que respeten el zoom y la configuración del usuario.

@media (min-width: 35em) {
  .titulo { font-size: 2.25rem; }
}

Puedes combinar condiciones con lógica:

/* AND: ambas condiciones */
@media (min-width: 20em) and (max-width: 35em) { /* ... */ }

/* OR: cualquiera de las dos */
@media (max-width: 20em), (min-width: 35em) { /* ... */ }

Entre las características consultables están min-width, max-width, min-height, orientation: landscape | portrait y min-resolution: 2dppx (para pantallas retina). El catálogo completo está en la documentación de @media en MDN.

Breakpoints con mobile first

Los breakpoints son los puntos donde el diseño cambia de un tamaño a otro. Con el enfoque mobile first, los estilos base sirven al móvil y cada media query añade ajustes para pantallas mayores:

.titulo { font-size: 1.5rem; }            /* móvil (base) */

@media (min-width: 35em) {                /* tablet */
  .titulo { font-size: 2rem; }
}

@media (min-width: 50em) {                /* escritorio */
  .titulo { font-size: 2.5rem; }
}

Estilos para impresión

Las media queries también cubren el medio de impresión. @media print aplica reglas cuando el usuario imprime o exporta a PDF:

@media print {
  * { color: black !important; background: none !important; }
}

Conclusión

El posicionamiento te da control fino sobre dónde vive cada elemento: fixed para modales, absolute para tooltips y menús, relative como ancla, y sticky para elementos que acompañan el scroll. Sumado a un manejo consciente de los contextos de apilamiento y a media queries con enfoque mobile first, tienes las piezas para construir interfaces dinámicas y adaptables.