Vlerat negative në pozicionim në CSS
Vetitë që kemi mësuar top, right,
bottom dhe left mund të marrin
jo vetëm vlera pozitive, por edhe negative.
Le t'i shohim me shembuj.
Shembull
Në shembullin e mëposhtëm, elementi pozicionohet absolutisht
në lidhje me prindin e tij dhe ndodhet në pozicion
0 nga lart, 0 nga e majta:
<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;
}
:
Shembull
Tani le ta lëvizim elementin në pozicion
-20px nga lart, -30px nga e majta:
<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ë mostrën e mëposhtme, blloku jeshil ndodhet
në qendër të ekranit duke përdorur margin, ndërsa
blloqet e kuqe pozicionohen në lidhje
me të. Përsëriteni faqen sipas
mostrës së dhënë:
