Valores negativos en el posicionamiento CSS
Las propiedades que hemos estudiado top, right,
bottom y left pueden aceptar
no solo valores positivos, sino también valores negativos.
Veamos algunos ejemplos.
Ejemplo
En el siguiente ejemplo, el elemento se posiciona de forma absoluta
en relación con su elemento padre y se coloca en la posición
0 desde la parte superior, 0 desde la izquierda:
<div id="parent">
<div id="child"></div>
</div>
#parent {
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
border: 1px solid red;
}
#child {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Ejemplo
Y ahora movamos el elemento a la posición
-20px desde la parte superior, -30px desde la izquierda:
<div id="parent">
<div id="child"></div>
</div>
#parent {
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
border: 1px solid red;
}
#child {
position: absolute;
top: -20px;
left: -30px;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
En la siguiente muestra, el bloque verde está centrado
en la pantalla usando margin, y los
bloques rojos se posicionan en relación con él.
Reproduce la página según la muestra proporcionada:
