Teoría
Teoría

position: relative y la propiedad right

La propiedad right funciona de forma similar a left, pero también mueve el elemento en la dirección opuesta.

Como ya comprobaste, puedes mover un elemento con posicionamiento relativo tanto horizontal como verticalmente combinando top/bottom con left/right.

Aumentemos el margen inferior para comprobar una vez más que el elemento conserva su lugar en el flujo. El margen se calculará desde el borde inferior del bloque de sombra, no desde el borde de la copia visual desplazada.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>position: relative y la propiedad right</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; bottom: 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 right con el valor 10px,
después cambia su valor a -10px,
y luego aumenta el margen inferior a 40px.