Tabla de contenido

El posicionamiento en CSS es uno de los conceptos que más confunden a los principiantes. Pero una vez que entiendes cómo funciona position, puedes crear tooltips, menús desplegables, overlays, headers fijos y muchos otros efectos de interfaz.

¿Qué es CSS Position?

La propiedad position determina cómo se coloca un elemento en el documento y cómo afecta a los elementos que lo rodean. Cuando cambias el position de un elemento, puedes usar las propiedades top, right, bottom y left para ajustar su ubicación.

position: static (el valor por defecto)

Todos los elementos tienen position: static por defecto. Con este valor, el elemento sigue el flujo normal del documento y las propiedades top, left, etc. no tienen efecto.

.elemento {
  position: static; /* comportamiento normal */
  top: 20px; /* esto NO funciona con static */
}

position: relative

Con position: relative, el elemento se mantiene en su lugar en el flujo del documento, pero puedes moverlo relativamente desde su posición original usando top, left, right, bottom. Los demás elementos no se mueven.

.desplazado {
  position: relative;
  top: 20px;   /* baja 20px desde su posición original */
  left: 30px;  /* se mueve 30px a la derecha */
}

El elemento “fantasma” sigue ocupando su espacio original, pero visualmente aparece desplazado. Esto rara vez se usa para mover elementos, sino para hacer que sean el contexto de posicionamiento para sus hijos absolutos.

position: absolute

Con position: absolute, el elemento se saca del flujo normal del documento. Los demás elementos actúan como si no existiera. Se posiciona relativo a su ancestro posicionado más cercano (cualquier elemento con position distinto de static).

.padre {
  position: relative; /* el absolute del hijo se referirá a este */
  width: 300px;
  height: 200px;
  background: #eee;
}

.hijo-absoluto {
  position: absolute;
  top: 10px;
  right: 10px;
  /* se ubica a 10px del borde superior y derecho del padre */
}

Si no hay ningún ancestro posicionado, el elemento absoluto se ubica relativo al elemento <html> (toda la página).

La relación padre-hijo: relative + absolute

Esta combinación es la más usada en interfaces web. El padre con relative crea el área de referencia, y el hijo con absolute se posiciona dentro de él.

Ejemplo práctico — Badge sobre una imagen:

<div class="tarjeta">
  <img src="producto.webp" alt="Producto">
  <span class="badge">Nuevo</span>
</div>
.tarjeta {
  position: relative;
  width: 200px;
}

.tarjeta img {
  width: 100%;
  display: block;
}

.badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: red;
  color: white;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
}

El badge aparece flotando sobre la esquina superior izquierda de la imagen.

Otro uso común — Overlay sobre imagen:

.imagen-wrapper {
  position: relative;
  overflow: hidden;
}

.overlay {
  position: absolute;
  inset: 0; /* equivale a top:0; right:0; bottom:0; left:0 */
  background: rgba(0, 0, 0, 0.5);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.imagen-wrapper:hover .overlay {
  opacity: 1;
}

position: fixed

Con position: fixed, el elemento se posiciona relativo al viewport (la ventana del navegador) y no se mueve al hacer scroll. Se sale del flujo del documento.

.header-fijo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: white;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Compensar el espacio del header fijo */
body {
  padding-top: 60px;
}

También se usa para botones flotantes:

.boton-flotante {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #E53E3E;
  color: white;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

position: sticky

Con position: sticky, el elemento se comporta como relative hasta que llega a un punto de scroll, momento en que se “pega” como si fuera fixed. Necesita al menos una propiedad de posición (top, left, etc.) para funcionar.

.nav-sticky {
  position: sticky;
  top: 0; /* se pega cuando llega al top del viewport */
  background: white;
  z-index: 10;
}

/* Cabeceras de tabla que se quedan fijas al hacer scroll */
th {
  position: sticky;
  top: 0;
  background: #f4f4f4;
}

z-index: controlar el apilamiento

Cuando varios elementos posicionados se superponen, z-index determina cuál está encima. Mayor número = más arriba.

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 100;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  z-index: 101; /* encima del backdrop */
}

z-index solo funciona en elementos con position distinto de static.

Entender CSS Position es un antes y después en el desarrollo frontend. Con solo estas 5 propiedades puedes implementar la mayoría de los patrones de interfaz que ves en aplicaciones web modernas.