Teoría
Teoría

Posicionamiento relativo

La propiedad CSS position define el modo de posicionamiento de los elementos. Su valor predeterminado es static, que corresponde al posicionamiento normal.

El valor relative activa el posicionamiento relativo. Un elemento con este posicionamiento puede desplazarse respecto a su ubicación original.

El elemento permanece en el flujo del documento y, al moverlo, se producen algunos efectos interesantes. Para empezar, asignemos posicionamiento relativo al bloque seleccionado.

index.html
style.css

HTML

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

ObjetivosRealizado

Asigna posicionamiento relativo al bloque con la clase block-relative.