Negatīvās vērtības pozicionēšanā CSS
Izpētītās īpašības top, right,
bottom un left var pieņemt
ne tikai pozitīvas, bet arī negatīvas
vērtības. Apskatīsim to ar piemēriem.
Piemērs
Nākamajā piemērā elements tiek absolūti pozicionēts
attiecībā pret savu vecāku un atrodas pozīcijā
0 no augšas, 0 no kreisās puses:
<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;
}
:
Piemērs
Tagad pārvietosim elementu uz pozīciju
-20px no augšas, -30px no kreisās puses:
<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;
}
:
Nākamajā paraugā zaļais bloks atrodas
ekrāna centrā, izmantojot margin, un
sarkanie bloki tiek pozicionēti attiecībā
pret to. Atkārtojiet lapu saskaņā ar
doto paraugu:
