Posicionamiento, Display y Z-Index - Tutorial CSS

Tipos de Display

La propiedad display controla cómo los elementos participan en el diseño. Entender block, inline e inline-block es esencial.

/* Block: ocupa todo el ancho, inicia en nueva línea */
div { display: block; }

/* Inline: se ajusta al contenido, no rompe la línea */
span { display: inline; }

/* Inline-block: flujo inline + ancho/alto */
.badge { display: inline-block; padding: 4px 10px; }

/* Ocultar elemento */
.hidden { display: none; }

Fundamentos de Posicionamiento

Relative

Mueve el elemento desde su posición normal, pero sigue ocupando espacio.

.box {
  position: relative;
  top: 10px;
  left: 20px;
}

Absolute

Se elimina del flujo; se posiciona relativo al ancestro posicionado más cercano.

.parent { position: relative; }
.child {
  position: absolute;
  top: 0;
  right: 0;
}

Fixed

Se mantiene en su lugar relativo al viewport.

.floating {
  position: fixed;
  bottom: 16px;
  right: 16px;
}

Sticky

Se desplaza hasta que alcanza un umbral, luego se fija.

header {
  position: sticky;
  top: 0;
}

Z-Index y Contexto de Apilamiento

z-index controla el orden de apilamiento, pero solo funciona en elementos posicionados.

.card { position: relative; z-index: 2; }
.overlay { position: absolute; z-index: 10; }

/* Crea contexto de apilamiento */
.modal {
  position: relative;
  z-index: 100;
  transform: translateZ(0);
}

✓ Solo los elementos posicionados responden a z-index.
✓ Propiedades como transform, opacity y filter crean nuevos contextos de apilamiento.

⚠️ Errores de Posicionamiento

❌ Los elementos absolutamente posicionados ignoran el flujo normal
❌ Falta top/right/bottom/left significa que no hay cambio visible
❌ Apilamiento inesperado debido a nuevos contextos de apilamiento