Posicionamiento en CSS

Relative, absolute y fixed, y el bloque contenedor que los ancla.

.codewrap {
  position: relative;
}

.codewrap .timer {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-end: 1rem;
}

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

Cómo funciona

1. Una caja absolute se ubica contra su ancestro posicionado más cercano.
2. inset es la forma abreviada de top, right, bottom y left.
3. Una caja fixed, en cambio, se ubica contra el viewport.

Palabras clave y builtins usados aquí

• position
• rem

El intento, en números

Líneas

15

Caracteres a escribir

208

Tokens

47

Ritmo de tres estrellas

85 tpm

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

Escribe este fragmento

Paso 1 de 7 en Posicionamiento; paso 17 de 24 en Flexbox y grid.

← Anterior Siguiente →