left property

left property သည် element ၏ ဘယ်ဘက်အစွန်းနေရာကို သတ်မှတ်ပေးပါသည်။ ၎င်း property အတွက် တန်ဖိုးများကို သာမန်အသိအမှတ်ပြု အတိုင်းအတာ ယူနစ်များဖြင့် ရေးသားနိုင်ပါသည်၊ �ပမာအားဖြင့်၊ ပစ်ဆယ်၊ လက်မ၊ ပွိုင့်၊ ရာခိုင်နှုန်းများဖြင့် ဖြစ်ပါသည်။ သတ်မှတ်ပေးသော တန်ဖိုးများသည် အနုတ်ကိန်းများလည်း ဖြစ်နိုင်ပါသည်၊ ထိုသို့ဖြစ်လျှင် element များသည် တစ်ခုပေါ်တစ်ခု ထပ်နေမည် ဖြစ်ပါသည်။ ကိုဩဒိနိတ်များရေတွက်ခြင်းကို position property က ဆုံးဖြတ်ပေးပါသည်၊ ၎င်းသည် သာမန်အားဖြင့် relative (အနေအထားဆိုင်ရာ တည်နေရာ) သို့မဟုတ် absolute (အတိအကျ တည်နေရာ) တန်ဖိုးကို လက်ခံပါသည်။

ဖွဲ့စည်းပုံ

selector {
	left: size or auto;
}

ဥပမာ

Child element အပေါ်သို့ မျှားတံတင်လိုက်သောအခါ ၎င်း၏ ဘယ်ဘက်နယ်နိမိတ် တည်နေရာကို 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;
}

ဥပမာ

ယခု မျှားတံတင်လိုက်သောအခါ child element ၏ ဘယ်ဘက်နယ်နိမိတ်သည် -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 property,
သည် element ၏ အောက်ဆုံးအစွန်း တည်နေရာကို သတ်မှတ်ပေးပါသည်
top property,
သည် element ၏ အပေါ်ဆုံးအစွန်း တည်နေရာကို သတ်မှတ်ပေးပါသည်
right property,
သည် element ၏ ညာဘက်အစွန်း တည်နေရာကို သတ်မှတ်ပေးပါသည်
::backdrop pseudoelement,
သည် ပထမဆုံး element ၏ နောက်တွင် တည်နေရာသတ်မှတ်ပေးပါသည်