Teoría
Teoría

position: relative y la propiedad left

¿Notaste que, al mover el bloque hacia abajo, los bloques que estaban debajo no se movieron?

Esto ocurre porque el elemento con posicionamiento relativo conserva su lugar en el flujo, señalado por el bloque de sombra. Lo que se desplaza es una especie de copia visual del bloque.

La propiedad left permite mover el bloque hacia la izquierda o hacia la derecha desde su ubicación original.

En este ejercicio moverás el bloque horizontalmente y aumentarás su altura para comprobar que sigue en el flujo. Al aumentar la altura, el bloque de abajo sí deberá desplazarse.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>position: relative y la propiedad left</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="block">Bloque 1</div> <div class="block-shadow"> <div class="block-relative">Bloque 2</div> </div> <div class="block">Bloque 3</div> </body> </html>

CSS

body { padding: 20px; } .block { margin-bottom: 20px; padding: 10px; color: white; background-color: #3a78a1; } .block-relative { position: relative; top: 10px; margin-bottom: 20px; padding: 10px; color: white; background-color: #3a78a1; } .block-shadow { background-color: #cccccc; }

ObjetivosRealizado

Al bloque con la clase block-relative, asígnale:

la propiedad left con el valor 10px,
después cambia su valor a -10px,
y luego asigna al bloque una altura de 100px.