Teoría
Teoría

position: relative y la propiedad top

Por ahora no ha pasado nada, pero todavía no hemos movido el elemento. Para ver mejor el desplazamiento, el bloque .block-relative está dentro de un bloque .block-shadow, que actúa como su «sombra».

El bloque de sombra tiene las mismas dimensiones que el bloque que contiene. Así podremos observar cómo se comporta un elemento con posicionamiento relativo dentro del flujo.

La propiedad top permite mover un elemento con posicionamiento relativo hacia arriba o hacia abajo desde su ubicación original. Su valor suele expresarse en píxeles, aunque también admite otras unidades de CSS.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>position: relative y la propiedad top</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; margin-bottom: 20px; padding: 10px; color: white; background-color: #3a78a1; } .block-shadow { background-color: #cccccc; }

ObjetivosRealizado

Asigna al bloque con la clase block-relative la propiedad top con el valor 10px.
Después cambia su valor a -10px.