Teoría
Teoría

Punto de referencia implícito

El punto de referencia implícito es el lugar donde estaba el elemento antes de asignarle posicionamiento absoluto. Si no defines las propiedades left … bottom, el elemento saldrá del flujo, pero permanecerá en su ubicación anterior.

Puedes desplazarlo desde ese punto con la propiedad margin. Esta funcionará de forma parecida a las propiedades left … bottom en un elemento con posicionamiento relativo.

Por cierto, el valor inicial de left es auto. Lo mismo ocurre con las otras tres propiedades. Al dejar las cuatro en auto, la posición vuelve a calcularse desde el punto de referencia implícito, con los desplazamientos que añadan los márgenes.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Punto de referencia implícito</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="block">¿Qué pasa si a un elemento le asignamos posicionamiento absoluto, <span class="inline-absolute">pero</span> no definimos ninguna propiedad que controle su ubicación (por ejemplo, left)? </div> <div class="block">El elemento saldrá del <span class="inline-absolute">flujo</span>, pero permanecerá donde estaba <span class="inline-absolute">antes.</span> </div> </body> </html>

CSS

body { padding: 10px; } .block { margin: 10px; padding: 20px; color: white; background-color: #3a78a1; } .inline-absolute { background-color: #e74c3c; opacity: 0.8; }

ObjetivosRealizado

A los elementos con la clase inline-absolute, asígnales:

posicionamiento absoluto,
un margen superior de -15px,
un margen izquierdo de 15px.