Position CSS

Aprende a usar la propiedad position en CSS con confianza. Aquí verás cómo aplicar relative, absolute, fixed, sticky y z-index con patrones prácticos que mejoran la maquetación, el control del scroll y el orden visual de tus elementos.

¿Qué es position en CSS y cómo se aplica?

La propiedad position define cómo un elemento se sitúa en la página y cómo responde a top, right, bottom y left. Además, z-index controla qué elemento queda por encima cuando se superponen.

Para facilitar el ejercicio, se configuraron estilos base y selección múltiple con comas para reutilizar reglas en varios contenedores.

/* Estilos base para varios contenedores */
.contenedor,
.contenedor-padre,
.contenedor-scroll,
.contenedor-z-index {
  border: 2px solid black;
  margin: 20px 0;
  padding: 10px;
}

/* Estilos base para cajas internas */
.caja,
.hijo-absolute,
.boton-fixed,
.elemento-sticky,
.capa {
  border: 1px solid red;
  padding: 10px;
}

• Propiedad clave: position controla el flujo y el desplazamiento con top/right/bottom/left.
• z-index: no es un tipo de position, pero define el orden de apilado.
• Selectores con comas: una regla aplica a varias clases a la vez.

¿Cómo funcionan relative, absolute y fixed en CSS?

Estos tres modos cambian el flujo del documento y la interacción con sus hermanos y su contenedor. Entender sus diferencias evita saltos inesperados de diseño.

¿Cuándo usar position relative con top, right, bottom, left?

Con relative, mueves el elemento desde su lugar original sin afectar el espacio que ocupaba: sus hermanos lo siguen “respetando”.

.caja-relative {
  position: relative;
  top: 20px;
  left: 30px;
}

• Desplaza desde su posición original.
• Sus hermanos mantienen el hueco original.
• Usa top/left/right/bottom para ajustes finos.

¿Qué hace position absolute dentro de un contenedor padre?

Con absolute, el elemento sale del flujo y no reserva espacio. Se posiciona respecto al primer ancestro con position configurado (comúnmente relative en el padre).

.contenedor-padre {
  position: relative;
  height: 100px;
}

.hijo-absolute {
  position: absolute;
  top: 10px;
  right: 10px;
}

• Requiere que el padre tenga position (relative, fixed o sticky).
• Sus hermanos no “guardan” su espacio.
• Se mueve libremente dentro del padre posicionado.

¿Cómo fijar un elemento con position fixed en la pantalla?

Fixed ignora el contenedor y se ancla a la pantalla. Permite botones persistentes durante el scroll.

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

• Permanece visible aunque haya scroll.
• No depende del position del padre.
• Ideal para acciones persistentes, como chat o “subir”.

¿Cómo se comporta sticky y cómo ordenar con z-index?

Sticky combina lo mejor de relative y fixed según el scroll. Por su parte, z-index resuelve qué capa se ve al frente cuando varias se superponen.

¿Cómo lograr un encabezado con position sticky y overflow?

Primero, crea un contenedor con scroll propio y luego fija el elemento cuando toque el borde indicado.

.contenedor-scroll {
  height: 150px;
  overflow-y: auto;
}

.elemento-sticky {
  position: sticky;
  top: 0;
}

• Se comporta como relative hasta alcanzar top: 0.
• Al llegar al borde indicado, actúa como fixed.
• Vuelve a relative al “liberarse” del borde al invertir el scroll.

¿Cómo controlar el orden visual con z-index y capas?

Define un contexto posicionado en el contenedor y usa z-index en elementos absolute para controlar qué queda delante.

.contenedor-z-index {
  position: relative;
  height: 150px;
}

.capa {
  position: absolute;
  width: 80px;
  height: 80px;
}

.capa-1 { top: 20px; left: 20px; background: blue;  z-index: 1; }
.capa-2 { top: 40px; left: 40px; background: red;   z-index: 2; }
.capa-3 { top: 60px; left: 60px; background: green; z-index: 3; }

• A mayor z-index, más adelante aparece la capa.
• Sin z-index, el orden depende del flujo y del apilado por defecto.
• El contenedor con position crea el contexto para apilar con control.

¿Tienes dudas o quieres compartir un caso de uso con position y z-index? Cuéntalo en los comentarios y afinamos la solución juntos.