Docs ejecutables de CSS: Position en CSS

Q: ¿Cómo posiciono un elemento absolute respecto a su padre?

Dale al padre position: relative; y al hijo position: absolute; con desplazamientos como top: 0; right: 0;. Sin un padre posicionado, el hijo se coloca respecto a la página.

Q: ¿Qué diferencia hay entre position relative y absolute?

relative mantiene el elemento en el flujo y solo desplaza dónde se dibuja, dejando reservado su espacio original. absolute lo saca del flujo y lo coloca respecto a su ancestro posicionado.

Q: ¿Por qué no funciona position: sticky?

Normalmente por una de tres cosas: no hay un top (u otro desplazamiento) definido, un ancestro tiene overflow: hidden o auto y se convierte en el contenedor de desplazamiento, o el padre del elemento sticky no es más alto que el elemento, así que no hay espacio para quedarse fijo.

Q: ¿Qué diferencia hay entre fixed y sticky?

fixed sale del flujo y queda fijado al viewport (salvo que un ancestro tenga un transform o un filter). sticky se queda en el flujo y se desplaza normalmente hasta llegar a su desplazamiento, y luego se queda fijo mientras su padre sigue en pantalla.

position: absolute en un ejemplo

Un elemento con posición absoluta sale del flujo normal y se coloca con top, right, bottom y left. Esos desplazamientos se miden desde el ancestro más cercano que tiene un position distinto de static, y por eso el padre recibe position: relative:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Absolute inside relative</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .card {
      position: relative;          /* the reference box */
      width: 260px; padding: 20px;
      background: #f3f4f6; border: 2px solid #111827;
    }
    .badge {
      position: absolute;
      top: 8px;
      right: 8px;
      padding: 2px 8px;
      background: #dc2626; color: white; font-size: 12px; border-radius: 999px;
    }
  </style>
</head>
<body>
  <div class="card" id="card">
    <span class="badge" id="badge">New</span>
    <h3>Card title</h3>
    <p>The badge sits 8px from the top and right edges of the card.</p>
  </div>
</body>
</html>

Borra position: relative de .card y la etiqueta salta a la esquina superior derecha de toda la página, porque ya no tiene un ancestro posicionado. Esa sola línea explica la mayoría de las preguntas de "position absolute no funciona".

Lo que conviene saber de los elementos absolute:

No ocupan espacio. El título y el párrafo se colocan como si la etiqueta no existiera.
Su ancho se ajusta a su contenido, salvo que definas width o a la vez left y right.
Los desplazamientos se miden hasta el borde del padding del bloque contenedor, por dentro de su borde.

Los cinco valores de position

Valor	¿En el flujo?	Desplazamientos medidos desde	Uso típico
`static` (por defecto)	Sí	Los desplazamientos se ignoran	Elementos normales
`relative`	Sí, conserva su espacio	Su propia posición normal	Referencia para hijos absolute, pequeños ajustes
`absolute`	No	El ancestro posicionado más cercano (o la página)	Etiquetas, tooltips, capas, botones de cerrar
`fixed`	No	El viewport	Encabezados, botones de chat, barras de cookies
`sticky`	Sí	Su contenedor de desplazamiento, al llegar al desplazamiento	Encabezados de tabla, títulos de sección, barras laterales

position: relative

Un elemento con posición relativa se queda donde estaba en el flujo. Los desplazamientos mueven dónde se dibuja, pero su espacio original queda reservado, así que nada a su alrededor se mueve:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Relative</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 8px; }
    .row div { width: 80px; padding: 16px 0; text-align: center; background: #bfdbfe; border: 2px solid #2563eb; }
    .row .moved {
      position: relative;
      top: 20px;
      left: 20px;
      background: #fde68a; border-color: #f59e0b;
    }
  </style>
</head>
<body>
  <div class="row">
    <div>1</div>
    <div class="moved" id="moved">2</div>
    <div id="three">3</div>
  </div>
</body>
</html>

La caja 2 se dibuja 20px más abajo y 20px más a la derecha, superpuesta a la caja 3, pero la caja 3 no se movió: sigue dejando lugar para la caja 2 en su posición original. Por sí solo, relative rara vez se usa para mover cosas; su trabajo principal es ser la caja de referencia de los hijos absolute.

Desplazamientos e inset

top, right, bottom y left aceptan longitudes, porcentajes (del bloque contenedor) y auto. La abreviatura inset define los cuatro en el mismo orden que margin:

.overlay {
  position: absolute;
  inset: 0;              /* top: 0; right: 0; bottom: 0; left: 0; */
}
.corner {
  position: absolute;
  inset: auto 16px 16px auto;  /* bottom right corner, 16px in */
}

Definir lados opuestos estira el elemento: left: 0; right: 0 lo hace tan ancho como el bloque contenedor. inset: 0 en un hijo absolute es la forma estándar de cubrir una tarjeta con una capa.

Centrar con absolute y transform

top: 50%; left: 50% pone la esquina superior izquierda del elemento en el centro. Luego translate(-50%, -50%) lo retrocede la mitad de su propio tamaño:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Absolute centering</title>
  <style>
    .stage { position: relative; height: 180px; background: #e5e7eb; }
    .center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 12px 20px;
      background: #2563eb; color: white; font-family: system-ui, sans-serif;
    }
  </style>
</head>
<body>
  <div class="stage" id="stage"><div class="center" id="c">Centered</div></div>
</body>
</html>

Flexbox y grid centran de forma más simple cuando el elemento puede quedarse en el flujo; la página de cómo centrar un div compara todos los métodos.

position: fixed

Un elemento fixed se coloca respecto al viewport y se queda ahí mientras la página se desplaza:

.chat-button {
  position: fixed;
  bottom: 16px;
  right: 16px;
}

Dos trampas. Un elemento fixed no ocupa espacio, así que un encabezado fixed tapa la parte superior de la página salvo que agregues padding-top al body. Y si algún ancestro tiene un transform, un filter o una perspective, ese ancestro pasa a ser la caja de referencia en lugar del viewport, así que el elemento se desplaza con él.

position: sticky

Un elemento sticky se desplaza normalmente hasta llegar a su desplazamiento, y luego se queda fijo ahí hasta que pasa el final de su padre. Desplázate en la caja de abajo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sticky</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .scroller { height: 220px; overflow-y: auto; border: 2px solid #111827; }
    h3 {
      position: sticky;
      top: 0;
      margin: 0; padding: 8px 12px;
      background: #2563eb; color: white;
    }
    p { margin: 0; padding: 10px 12px; border-bottom: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <div class="scroller" id="scroller">
    <section>
      <h3>A</h3>
      <p>Adams</p><p>Allen</p><p>Alvarez</p><p>Anderson</p><p>Arnold</p>
    </section>
    <section>
      <h3>B</h3>
      <p>Baker</p><p>Bell</p><p>Brooks</p><p>Brown</p><p>Bryant</p>
    </section>
    <section>
      <h3>C</h3>
      <p>Campbell</p><p>Carter</p><p>Clark</p><p>Collins</p><p>Cooper</p>
    </section>
  </div>
</body>
</html>

Cada letra se queda fija arriba de la caja de desplazamiento mientras su sección está visible, y luego la empuja la siguiente, porque un elemento sticky nunca sale de su padre.

Cuando sticky no se queda fijo, revisa esto:

Sin desplazamiento. position: sticky no hace nada sin top, bottom, left o right.
Un ancestro con overflow: hidden, auto o scroll. Se convierte en el contenedor de desplazamiento, y si en realidad no se desplaza, nada se queda fijo. Usa overflow: clip si solo necesitas ocultar el desbordamiento.
Un padre que no es más alto que el elemento sticky. No hay espacio para quedarse fijo dentro de él.
Un padre flex o grid que lo estira. En una fila flex, agrega align-self: flex-start a la barra lateral sticky.

Errores comunes

Olvidar position: relative en el padre de un elemento absolute.
Usar absolute para el layout de la página. Los elementos absolute se ignoran entre sí y con el contenido, así que el texto se superpone en pantallas más pequeñas. Usa flexbox o grid para el layout y absolute para pequeñas decoraciones.
Desplazamientos en un elemento static. top: 10px no hace nada sin un position.
Pelear por qué elemento queda encima. Los elementos posicionados que se superponen se ordenan con z-index.
Un encabezado fixed que tapa contenido. Agrega padding a la página, o scroll-padding-top para que los enlaces a anclas queden debajo de él.

Preguntas frecuentes

¿Qué hace position: absolute?

Saca el elemento del flujo normal (los demás elementos actúan como si no estuviera) y lo coloca con top, right, bottom y left, medidos desde su bloque contenedor: el ancestro más cercano cuyo position no es static.

¿Cómo posiciono un elemento absolute respecto a su padre?

Dale al padre position: relative; y al hijo position: absolute; con desplazamientos como top: 0; right: 0;. Sin un padre posicionado, el hijo se coloca respecto a la página.

¿Qué diferencia hay entre position relative y absolute?

relative mantiene el elemento en el flujo y solo desplaza dónde se dibuja, dejando reservado su espacio original. absolute lo saca del flujo y lo coloca respecto a su ancestro posicionado.

¿Por qué no funciona position: sticky?

Normalmente por una de tres cosas: no hay un top (u otro desplazamiento) definido, un ancestro tiene overflow: hidden o auto y se convierte en el contenedor de desplazamiento, o el padre del elemento sticky no es más alto que el elemento, así que no hay espacio para quedarse fijo.

¿Qué diferencia hay entre fixed y sticky?

fixed sale del flujo y queda fijado al viewport (salvo que un ancestro tenga un transform o un filter). sticky se queda en el flujo y se desplaza normalmente hasta llegar a su desplazamiento, y luego se queda fijo mientras su padre sigue en pantalla.

Conceptos relacionados