left property

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

ဖွဲ့စည်းပုံ

cssselector {
  left: size or auto;
}

ဥပမာ

Child element အပေါ်သို့ မျှားတံတင်လိုက်သောအခါ ၎င်း၏ ဘယ်ဘက်နယ်နိမိတ် တည်နေရာကို 25px နှင့် ညီမျှအောင် သတ်မှတ်ကြည့်ကြပါစို့-

html<div id="elem">
  <p></p>
</div>
css#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 တွင် တည်ရှိပါစေ-

html<div id="elem">
  <p></p>
</div>
css#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 ၏ နောက်တွင် တည်နေရာသတ်မှတ်ပေးပါသည်