CSSда позиционлашда манфий қийматлар
Биз ўрганган top, right,
bottom ва left хусусиятлари
фақат мусбат эмас, балки манфий қийматларни
ҳам қабул қилиши мумкин. Келиб, мисолларда кўрамиз.
Мисол
Қуйидаги мисолда элемент ўта родителига нисбатан
абсолют позиционланади ва 0 юқоридан,
0 чапдан жойлашади:
<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;
}
:
Мисол
Энди эса, элементни -20px юқоридан,
-30px чапдан жойга кўчамиз:
<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;
}
:
Қуйидаги намунада яшил блок margin
ёрдамида экран марказида туради, қизил блоклар
эса унга нисбатан позиционланади. Саҳифани
кўрсатилган намунага мос такрорланг:
