Negatiivsed väärtused positsioneerimisel CSS-is
Meie poolt õpitud omadused top, right,
bottom ja left võivad võtta
mitte ainult positiivseid, vaid ka negatiivseid
väärtusi. Vaatame näidete varal.
Näide
Järgmises näites positsioneeritakse element absoluutselt
oma vanema suhtes ja asub positsioonil
0 ülevalt, 0 vasakult:
<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;
}
:
Näide
Nüüd aga liigutame elemendi positsiooni
-20px ülevalt, -30px vasakult:
<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;
}
:
Järgmises näites on roheline plokk
ekraani keskele asetatud kasutades margin, aga
punased plokid on positsioneeritud selle
suhtes. Korrake lehte
antud näidise järgi:
