Negatieve waarden bij positioneren in CSS
De door ons bestudeerde eigenschappen top, right,
bottom en left kunnen niet alleen positieve,
maar ook negatieve waarden aannemen. Laten we eens kijken naar voorbeelden.
Voorbeeld
In het volgende voorbeeld wordt het element absoluut gepositioneerd
ten opzichte van zijn ouder en staat het in de positie
0 vanaf de bovenkant, 0 vanaf links:
<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;
}
:
Voorbeeld
Laten we het element nu verplaatsen naar de positie
-20px vanaf de bovenkant, -30px vanaf links:
<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;
}
:
In het volgende voorbeeld staat het groene blok in het
midden van het scherm met behulp van margin, en
worden de rode blokken ten opzichte daarvan gepositioneerd.
Herhaal de pagina volgens het gegeven voorbeeld:
