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

inset

Para evitarte que escribir cada lado por separado (top, right, bottom y left), dispones de un estilo llamado inset que acorta su declaración. Su estructura es igual a utilizar margin o padding.

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

Podría representarse como:

.elemento {
  position: fixed;
  inset: 0;
}

O si quisiéramos únicamente top, right y left.

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

Podría representarse como:

.elemento {
  position: fixed;
  inset: 0 0 auto;
}

Recordemos que 3 valores son equivalentes a top | left y right | bottom. Por lo tanto debo descargar bottom, y para ello podemos usar auto.

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.

Actividad 1

Crea un header con su logo y menú que esté siempre anclado a la parte superior.

Actividad 2

Crea una página con un título y varios párrafos con texto Lorem.

A continuación diseña una div que ocupe toda la pantalla y tape completamente lo anterior. En su centro debe estar escrito: "Cargando... por favor espere".

Actividad 3

Realiza un cartel de Cookies que esté anclado a la parte inferior izquierda.

Debe contener:

Texto: ¿Acepta nuestras cookies?
Botón de aceptar.
Botón de cancelar.

Actividad 4

Realiza una alerta que para pedir que el visitante se suscriba a la newsletter. Bloqueará la navegación hasta que el usuario interactúe.

Debe tener las siguientes características:

Formulario para añadir el email y botón de enviar.
Aspa para cerrar la alerta.
Fondo negro semitransparente de relleno.
El contenido del formulario estará en un recuadro con fondo blanco.

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

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me invitas a un café? ☕

Puedes hacerlo usando el terminal.

ssh customer@andros.dev -p 5555

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

Escribe el primer comentario