Encabezados sticky y apilamiento en CSS

Sticky vive entre relative y fixed; z-index ordena lo que se superpone.

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 10;
  backdrop-filter: blur(8px);
}

thead th {
  position: sticky;
  inset-block-start: 0;
  background: #0b0c10;
}

.card {
  isolation: isolate;
}

Cómo funciona

1. Una caja sticky necesita un inset y un ancestro con scroll al cual pegarse.
2. z-index solo aplica a elementos posicionados o hijos de flex y grid.
3. isolation: isolate mantiene el apilamiento de un componente para sí.

Palabras clave y builtins usados aquí

• background
• blur
• isolation
• position
• px

El intento, en números

Líneas

16

Caracteres a escribir

203

Tokens

48

Ritmo de tres estrellas

85 tpm

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

Escribe este fragmento

Paso 3 de 7 en Posicionamiento; paso 19 de 24 en Flexbox y grid.

← Anterior Siguiente →