Thamani Hasibu katika Uwekaji Nafasi katika CSS
Sifa tulizosoma top, right,
bottom na left zinaweza kukubali
sio tu thamani chanya, bali pia thamani
hasibu. Hebu tuangalie kwa mifano.
Mfano
Katika mfano ufuatao kipengele kinawekwa nafasi kabisa
ukilinganisha na kipenzi chake na kinasimama katika nafasi
0 kutoka juu, 0 kutoka kushoto:
<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;
}
:
Mfano
Na sasa hebu tusogeze kipengele hadi nafasi
-20px kutoka juu, -30px kutoka kushoto:
<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;
}
:
Katika kielelezo kifuatacho kizuizi cha kijani kinasimama
katikati ya skrini kwa kutumia margin, na
matofali mekundu yanawekwa nafasi ukilinganisha
nayo. Rudisha ukurasa kulingana na
kielelezo kilichowasilishwa:
