A6. Posicionamiento

Objetivo

Experimentar con las propiedades de posicionamiento CSS para comprender cómo afectan a la ubicación de los elementos, al flujo normal del documento y a su superposición.

En esta actividad trabajarás con position, top, right, bottom, left, z-index, float y clear.

1. Preparación del proyecto

A partir de esta actividad, todos los ejercicios de DIW que incluyan código deberán almacenarse en tu repositorio usuario-diw, comenzando por los ejercicios de esta unidad (UD2).

En el repositorio distinguiremos dos partes:

• Documentación (docs/): Contendrá los archivos Markdown con las explicaciones, capturas y resultados de las actividades, manteniendo la organización utilizada hasta ahora.
• Ejercicios (exercises/): Contendrá el código fuente de los ejercicios prácticos. Cada ejercicio tendrá su propio directorio con todos los archivos necesarios para ejecutarlo.

La estructura del repositorio será similar a la siguiente:

usuario-diw/
├── docs/                       # Documentación en Markdown
│   ├── index.md
│   ├── ud1/
│   └── ud2/
│       └── s1/
│           ├── a1-css-syntax.md
│           ├── a2-ways-to-apply-css.md
│           ├── a3-inheritance.md
│           ├── a4-selectors.md
│           ├── a5-test-your-knowledge.md
│           └── a6-positioning.md
│
├── exercises/                  # Código fuente de los ejercicios
│   └── ud2/
│       └── s1/
│           ├── a2-ways-to-apply-css/
│           ├── a3-inheritance/
│           ├── a4-selectors/
│           ├── a5-test-your-knowledge/
│           └── a6-positioning/
│               ├── index.html
│               └── styles.css
│
└── ...                         # Resto de archivos de la plantilla

Documentación y código fuente

La estructura anterior es orientativa. Cada ejercicio tendrá su documentación y, solo cuando requiera trabajar con código, un directorio con sus archivos fuente.

• docs/: Documentación del trabajo realizado mediante explicaciones, capturas y respuestas a las preguntas.
• exercises/: Archivos del ejercicio (.html, .css, .js, imágenes, etc.) necesarios para consultarlo y ejecutarlo.

No todos los ejercicios necesitan un directorio en exercises/. Deberás revisar cada enunciado para determinarlo.

No es necesario incluir el código completo en la documentación, ya que estará disponible en exercises/.

Deberás incorporar al repositorio los ejercicios anteriores de esta unidad que contengan código y continuar utilizando esta organización en las siguientes actividades.

Para este ejercicio:

1. Crea el directorio exercises/ud2/s1/a6-positioning/.
2. Crea un archivo index.html y una hoja de estilos externa styles.css.
3. Organiza el documento HTML en secciones independientes, una para cada apartado práctico, identificadas mediante un título.
4. Incluye los elementos HTML y las reglas CSS necesarias para comprobar el comportamiento de las propiedades estudiadas.
5. Documenta los resultados en el apartado correspondiente docs/ud2/s1/a6-positioning.md, manteniendo la estructura de documentación existente.
6. Guarda los cambios mediante Git y súbelos a tu repositorio remoto de GitHub.

2. Flujo normal y posicionamiento relativo

Partiendo del siguiente código HTML y CSS, experimenta con el posicionamiento relativo y observa cómo afecta al flujo normal del documento.

Código inicial

index.html

<section class="relative-example">
  <h2>Posicionamiento relativo</h2>

  <div class="box box-1">Caja 1</div>
  <div class="box box-2">Caja 2</div>
  <div class="box box-3">Caja 3</div>
</section>

styles.css

.relative-example {
  padding: 20px;
  border: 2px solid #333;
}

.box {
  width: 150px;
  height: 80px;
  margin: 10px;
  padding: 10px;
  border: 2px solid #333;
}

.box-1 {
  background-color: lightcoral;
}

.box-2 {
  background-color: lightblue;
}

.box-3 {
  background-color: lightgreen;
}

Realiza las siguientes pruebas:

1. Comprueba cómo se distribuyen inicialmente las tres cajas siguiendo el flujo normal del documento.
2. Aplica position: relative a la segunda caja.
3. Desplázala 30px hacia abajo y 40px hacia la derecha mediante top y left.
4. Observa qué ocurre con el espacio que ocupaba originalmente y con la posición de las otras dos cajas.
5. Modifica los valores de top y left para provocar una superposición entre cajas.

Responde:

• ¿La segunda caja conserva su espacio original?
• ¿La tercera caja cambia de posición?
• ¿Qué ocurre cuando dos cajas se superponen?
• ¿Qué diferencia observas entre la posición visual de la segunda caja y el espacio que ocupa en el flujo normal?

3. Posicionamiento absoluto

Crea un contenedor rectangular de 500px de ancho y 300px de alto, con un borde visible.

Dentro del contenedor, incluye tres cajas pequeñas.

1. Establece position: relative en el contenedor.
2. Aplica position: absolute a las tres cajas.
3. Sitúa la primera en la esquina superior izquierda.
4. Sitúa la segunda en la esquina superior derecha.
5. Sitúa la tercera en la esquina inferior derecha.
6. Utiliza desplazamientos de 10px respecto a los bordes correspondientes.

A continuación:

1. Elimina temporalmente position: relative del contenedor.
2. Observa qué ocurre con la posición de las cajas.
3. Restablece la propiedad.

Responde:

• ¿Por qué se utiliza position: relative en el contenedor?
• ¿Qué sucede cuando se elimina?
• ¿Las cajas posicionadas absolutamente ocupan espacio en el flujo normal?

4. Posicionamiento fijo y sticky

Crea una sección de la página que contenga:

• Una cabecera con un título.
• Una barra de navegación.
• Varias subsecciones con suficiente contenido para generar desplazamiento vertical.
• Un botón situado en la esquina inferior derecha de la ventana.

La barra de navegación deberá encontrarse dentro de un contenedor con suficiente altura para poder observar el comportamiento de sticky.

Realiza las siguientes modificaciones:

1. Aplica position: sticky y top: 0 a la barra de navegación.
2. Comprueba cómo se comporta al desplazarte verticalmente por la página.
3. Aplica position: fixed al botón.
4. Sitúalo a 20px del borde inferior y a 20px del borde derecho.
5. Comprueba si el botón permanece visible mientras te desplazas por la página.

Responde:

• ¿Qué diferencia existe entre el comportamiento de fixed y sticky?
• ¿Qué ocurre si eliminas top: 0 de la barra de navegación?
• ¿Qué diferencia existe entre ambos valores respecto al flujo normal del documento?
• ¿Qué ocurre con la barra de navegación cuando termina el contenedor en el que se encuentra?

5. Superposición y z-index

Crea un contenedor con tres cajas cuadradas de 150px de lado.

1. Aplica position: relative al contenedor.
2. Aplica position: absolute a las tres cajas.
3. Utiliza top y left para conseguir que se superpongan parcialmente.
4. Asigna un color de fondo diferente a cada caja.
5. Establece los siguientes valores de z-index:
   • Primera caja: 1.
   • Segunda caja: 3.
   • Tercera caja: 2.
6. Comprueba el orden de superposición.
7. Modifica los valores para conseguir que la primera caja aparezca por encima de las demás.

Responde:

• ¿Qué relación existe entre z-index y el orden de superposición?
• ¿Es necesario utilizar valores muy elevados de z-index?

Contextos de apilamiento

Investiga qué es un contexto de apilamiento (stacking context) y cómo afecta al funcionamiento de z-index.

A continuación:

1. Crea dos contenedores hermanos con position: relative.
2. Asigna z-index: 1 al primero y z-index: 2 al segundo.
3. Dentro del primer contenedor, crea una caja con z-index: 9999 y un posicionamiento adecuado.
4. Dentro del segundo contenedor, crea otra caja con z-index: 10 y un posicionamiento adecuado.
5. Ajusta las posiciones y tamaños para que ambas cajas se superpongan visualmente.
6. Comprueba cuál aparece por encima.

Responde:

• ¿Por qué la caja con z-index: 9999 puede aparecer por debajo de la caja con z-index: 10?
• ¿Qué relación existe entre los contextos de apilamiento de los contenedores y los valores de z-index de sus descendientes?

6. Float y clear

Crea una sección con:

• Una imagen de aproximadamente 150px de ancho.
• Dos párrafos de texto.
• Un bloque final con un color de fondo diferente.

Realiza los siguientes pasos:

1. Aplica float: left a la imagen.
2. Añade un margen derecho de 15px.
3. Comprueba cómo se distribuye el texto alrededor de la imagen.
4. Cambia float: left por float: right y observa las diferencias.
5. Ajusta la cantidad de texto o la altura de la imagen para conseguir que, antes de aplicar clear, el bloque final pueda situarse junto a la imagen flotante.
6. Aplica clear: both al bloque final.
7. Comprueba cómo cambia su posición respecto a la imagen flotante.

Responde:

• ¿Qué efecto produce float sobre el texto?
• ¿Para qué sirve clear: both?
• ¿Qué diferencia observas en la posición del bloque final antes y después de aplicar clear: both?
• ¿Por qué actualmente no se recomienda utilizar float para construir la estructura general de una página web?

7. Comparación de los métodos de posicionamiento

Elabora una tabla comparativa con los cinco valores principales de position:

• static.
• relative.
• absolute.
• fixed.
• sticky.

Para cada uno, indica:

• Si conserva su espacio en el flujo normal.
• Respecto a qué referencia se posiciona habitualmente.
• Si permanece visible al desplazarse por la página.
• Un ejemplo de utilización habitual.

Entrega

La entrega se realizará mediante un único documento PDF en AULES. Además, el código fuente deberá estar disponible en tu repositorio usuario-diw de GitHub.

Repositorio GitHub

Comprueba que:

• Has incorporado los ejercicios anteriores de la UD2 que contienen código, cada uno en su directorio correspondiente.
• El directorio exercises/ud2/s1/e6/ contiene todos los archivos necesarios para ejecutar esta actividad.
• Los cambios están correctamente registrados mediante Git y subidos al repositorio remoto.

Documento PDF

El documento PDF deberá incluir:

• Enlace al directorio del ejercicio en tu repositorio de GitHub.
• Capturas de pantalla de los resultados obtenidos en cada apartado práctico.
• Explicaciones breves de las modificaciones realizadas y del comportamiento observado.
• Respuestas a todas las preguntas planteadas.
• Tabla comparativa del último apartado.

Las capturas deben permitir comprobar visualmente el funcionamiento de las propiedades CSS estudiadas.

No es necesario incluir todo el código fuente en el PDF, ya que estará disponible en GitHub, pero sí los fragmentos relevantes cuando sean necesarios para explicar los resultados.