Valeurs négatives en positionnement CSS
Les propriétés que nous avons étudiées top, right,
bottom et left peuvent prendre
non seulement des valeurs positives, mais aussi des valeurs
négatives. Regardons quelques exemples.
Exemple
Dans l'exemple suivant, l'élément est positionné de manière absolue
par rapport à son parent et se trouve à la position
0 en haut, 0 à gauche :
<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;
}
:
Exemple
Et maintenant, déplaçons l'élément à la position
-20px en haut, -30px à gauche :
<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;
}
:
Dans l'exemple suivant, le bloc vert est centré sur
l'écran à l'aide de margin, et
les blocs rouges sont positionnés par rapport
à lui. Reproduisez la page selon
l'exemple donné :
