Lección 18: 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

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me ayudas?

No te sientas obligado a realizarme una donación, pero cada aportación me ayuda a mantener el sitio en activo para que continúe existiendo y me motiva a continuar creando nuevo contenido.

Comprame un café
Pulsa sobre la imagen
  • 1 café: Se mantiene el dominio durante 4 meses.
  • 2 cafés: Se paga 1 mes de servidor.
  • 3 cafés: Se cubre 1 mes de Black box.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

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

Escribe el primer comentario