Lección 17: Position

Cuando queremos colocar elementos encima de otros, como si fueran capas de Photoshop o software de edición de imágenes similares, podemos realizarlo con position.

absolute

Se posiciona respecto al documento, por lo cual sigue al scroll.

.elemento {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

fixed

Se posiciona respecto al viewport, por lo cual ignora el scroll.

.elemento {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

Más información

z-index

Indica la profundidad, o eje Z. Empieza por 0. Cuando mayor sea más por encima de otros elementos se posicionará, no hay límite definido. También es posible usar números negativos para colocarlo por debajo del documento.

.elemento {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

Más información

Existen otras position como static y relative que se utilizan antiguamente para maquetar. Hoy en día tenemos soluciones más modernas como flex o grid.

17-1 17-2 17-3 17-4

¿Te ayudo?

  • 1 café: ¡Gracias por el apoyo! Te ayudo a que esta web siga estando online pagando los servidores.
  • 2 cafés: Respondo a una duda en los comentarios.
  • 4 cafés: Te corrijo una actividad y te envío feedback.
Comprame un café

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario