Position Property

1. Static (ပုံမှန်)

ဒါကတော့ Element တိုင်းရဲ့ မူလ (Default) အနေအထားပါ။ သူက ဘာမှ ထူးခြားမှု မရှိပါဘူး။ သူ့ကို top, left, right, bottom စတဲ့ Property တွေ သွားပေးလို့လည်း မရပါဘူး။

.box {
  position: static;
}

2. Relative (မူလနေရာမှ ရွှေ့ခြင်း)

သူကတော့ မိမိရဲ့ မူလရှိနေတဲ့ မူရင်းနေရာကနေ အခြေခံပြီး ဘယ်၊ ညာ၊ အပေါ်၊ အောက် ရွှေ့ပြောင်းတာပါ။ အရေးကြီးတဲ့ အချက်က သူသာ နေရာရွှေ့သွားပေမဲ့၊ တခြား Element တွေကတော့ သူ မူလနေရာမှာ ရှိနေတုန်းပဲလို့ ထင်ပြီး သူယူထားတဲ့ နေရာကို ဝင်မလုဘဲ ဆက်ထားပေးထားမှာ ဖြစ်ပါတယ်။

.box {
  position: relative;
  top: 20px;  /* မူလနေရာကနေ အောက်ကို 20px ဆင်းမယ် */
  left: 10px; /* မူလနေရာကနေ ညာဘက်ကို 10px တိုးမယ် */
}

3. Absolute (Container ကို အမှီပြု၍ ရွှေ့ခြင်း)

ဒီကောင်က လက်တွေ့မှာ အရမ်းကို အသုံးဝင်ပါတယ်။ သူက သူ့ရဲ့ အပြင်ဘက်က အနီးဆုံး position: relative; ပေးထားတဲ့ Container Element ကို ရှာပြီး၊ အဲဒီ Container ရဲ့ ဘောင်အတွင်းမှာပဲ စိတ်ကြိုက် နေရာယူတာပါ။ အကယ်၍ သူ့ရဲ့ အပြင်ဘက်မှာ relative ပေးထားတဲ့ Container တစ်ခုမှ မရှိဘူးဆိုရင်တော့၊ သူက Page တစ်ခုလုံး (Body) ကို အမှီပြုပြီး နေရာယူသွားမှာ ဖြစ်ပါတယ်။

.parent {
  position: relative; /* Parent Container မှာ relative ပေးထားရမယ် */
}

.child {
  position: absolute;
  top: 0;
  right: 0; /* Parent Container ရဲ့ ညာဘက်ထောင့်စွန်းမှာ ကပ်နေမယ် */
}

4. Fixed (မျက်နှာပြင်မှာ ကပ်ထားခြင်း)

User က Scroll ဆွဲချလိုက်ရင်တောင် သူက လိုက်မပါသွားပါဘူး။ Browser ရဲ့ မျက်နှာပြင် (Viewport) ပေါ်မှာ အသေ ကပ်ကျန်နေခဲ့မှာပါ။ ဥပမာအားဖြင့် Website တွေမှာ တွေ့ရလေ့ရှိတဲ့ Chat Button လေးတွေ၊ အပေါ်ဆုံးကနေ လိုက်ပါနေတဲ့ Header Bar တွေမှာ သုံးပါတယ်။

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
}

5. Sticky (စေးကပ်)

သူကတော့ User က Scroll ဆွဲချသွားလို့ မိမိသတ်မှတ်ထားတဲ့ တစ်နေရာကို ရောက်သွားတဲ့အခါမှာ၊ fixed လိုမျိုး အသေ ကပ်ကျန်ခဲ့တာမျိုး ဖြစ်ပါတယ်။

.sidebar {
  position: sticky;
  top: 10px; /* Scroll ဆွဲလို့ Top 10px ရောက်ရင် ကပ်နေမယ် */
}