#03 - Posición y apilamiento

Objetivos de la Tarea

Comprender los conceptos de:

• Flujo de un documento web
• Espacio que ocupa un elemento en el flujo
• Entender el funcionamiento de la propiedad position y sus distintos valores
• Entender el funcionamiento de la propiedad z-index

Propiedad: position

• La propiedad position de CSS especifica cómo un elemento es posicionado en el documento.
• Las propiedades top, right, bottom, y left determinan la ubicación final de los elementos posicionados.

Tipos de posicionamiento

Un elemento posicionado es un elemento cuyo valor computado de position es relative, absolute, fixed, o sticky. (En otras palabras, cualquiera excepto static).

Propiedad: z-index

La propiedad z-index en CSS se utiliza para ordenar los elementos que se superpongan entre sí. Con la propiedad z-index podemos controlar qué elemento iría encima y cual debajo, como si el documento tuviera profundidad, tres dimensiones en lugar de dos.

Ejercicio 1

Crear una página web semejante a esta, , utilizando la propiedad y el valor position:absolute:

Ejercicio 2

Crear una página web semejante a esta, , utilizando la propiedad y el valor position:sticky:

Ejercicio 3

Crear una página web semejante a esta, utilizando la propiedad z-index:

Ejercicio 4

Crear una página web semejante a esta, utilizando la propiedad y los valores position:relative y position: absolute:

Etiquetas: 2ª Evaluación, CSS