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;
}
:
ဆက်လက်လေ့လာရန်
-
bottomproperty,
သည် element ၏ အောက်ဆုံးအစွန်း တည်နေရာကို သတ်မှတ်ပေးပါသည် -
topproperty,
သည် element ၏ အပေါ်ဆုံးအစွန်း တည်နေရာကို သတ်မှတ်ပေးပါသည် -
rightproperty,
သည် element ၏ ညာဘက်အစွန်း တည်နေရာကို သတ်မှတ်ပေးပါသည် -
::backdroppseudoelement,
သည် ပထမဆုံး element ၏ နောက်တွင် တည်နေရာသတ်မှတ်ပေးပါသည်