Teoría
Teoría

Posicionamiento absoluto

El valor absolute de la propiedad position activa el posicionamiento absoluto de un elemento.

Los elementos con posicionamiento absoluto tienen estas características:

Salen del flujo del documento. El espacio que ocupaban queda libre y los elementos vecinos lo ocupan.
Su ancho predeterminado depende del contenido: no se extienden por todo el ancho disponible.
Permanecen donde estaban si no se asignan valores a las propiedades top, left, right y bottom.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Posicionamiento absoluto</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="block">Bloque 1</div> <div class="block-absolute">Bloque 2</div> <div class="block">Bloque 3</div> </body> </html>

CSS

body { padding: 20px; } .block { margin-bottom: 20px; padding: 10px; text-align: center; color: white; background-color: #3a78a1; } .block-absolute { margin-bottom: 20px; padding: 10px; color: white; background-color: rgba(255, 0, 0, 0.5); }

ObjetivosRealizado

Asigna posicionamiento absoluto al bloque con la clase block-absolute.