Sticky, fixed y el bloque contenedor en CSS

Dónde cae un elemento absolute depende por completo de qué ancestro está posicionado.

.panel { position: relative; }

.panel .close {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-end: 0.5rem;
}

.table-head th {
  position: sticky;
  inset-block-start: 0;
  background: white;
  z-index: 2;
}

.toast {
  position: fixed;
  inset-block-end: 1rem;
  inset-inline-end: 1rem;
}

Cómo funciona

1. position: absolute mide desde el ancestro posicionado más cercano.
2. fixed mide desde el viewport — salvo que un ancestro tenga un transform.
3. sticky necesita un umbral y un ancestro con scroll y espacio para moverse.

Palabras clave y builtins usados aquí

• background
• position
• rem

El intento, en números

Líneas

20

Caracteres a escribir

289

Tokens

67

Ritmo de tres estrellas

85 tpm

Al ritmo de tres estrellas de 85 tokens por minuto, este intento toma unos 47 segundos.

Escribe este fragmento

Paso 2 de 7 en Posicionamiento; paso 18 de 24 en Flexbox y grid.

← Anterior Siguiente →