left хусусияти
left хусусияти элементнинг
чап четининг жойлашувини белгилайди. Хусусият учун қийматларни
ўлчам бирликлари, масалан, пикселлар, дюймлар, пунктлар, фоизларда
белгилаш мумкин. Бериладиган қийматлар манфий сонлар ҳам бўлиши мумкин,
бу ҳолда элементлар бир-бирининг устига қўйилади. Координаталарни ҳисоблаш position хусусияти
орқали аниқланади,
узок, у odatda relative
(нисбий жойлашув) ёки absolute
(мустақил жойлашув) қийматларини қабул қилади.
Синтаксис
селектор {
left: ўлчам ёки auto;
}
Мисол
Келгила, фарзанд элементга курсорни олиб борилганда
унинг чап чегарасининг жойлашувини
25px га тенг қиламиз:
<div id="elem">
<p></p>
</div>
#elem {
width: 400px;
height: 300px;
border: 1px solid black;
}
p {
position: relative;
width: 100px;
height: 100px;
border: 1px solid red;
margin-left: 50px;
}
p:hover {
left: 25px;
width: 100px;
height: 100px;
border: 1px solid red;
}
:
Мисол
Энди эса фарзанд элементнинг чап чегараси
курсор олиб борилганда
-50px га жойлашсин:
<div id="elem">
<p></p>
</div>
#elem {
width: 400px;
height: 300px;
border: 1px solid black;
}
p {
position: relative;
width: 100px;
height: 100px;
border: 1px solid red;
margin-left: 50px;
}
p:hover {
left: -50px;
width: 100px;
height: 100px;
border: 1px solid red;
}
:
Шунингдек қаранг
-
bottomхусусияти,
элементнинг пастки чети жойлашувини белгиловчи -
topхусусияти,
элементнинг юқори чети жойлашувини белгиловчи -
rightхусусияти,
элементнинг ўнг чети жойлашувини белгиловчи -
::backdropпсевдоэлементи,
биринчи элементдан кейинги жойлашувни белгиловчи