Z-Index Property

အခြေခံ သဘောတရား

z-index အတွက် ပေးလိုက်တဲ့ တန်ဖိုး (Value) ဂဏန်း ပိုများတဲ့ Element က အပေါ်ဆုံးမှာ ရှိနေမှာဖြစ်ပြီး၊ တန်ဖိုး ပိုနည်းတဲ့ Element က အောက်ဘက်ကို ရောက်သွားမှာ ဖြစ်ပါတယ်။

Positive Value (ဥပမာ 1, 10, 100): ပုံမှန်ထက် ပိုမြင့်တဲ့ အထပ်ကို ရောက်သွားပါမယ်။
Negative Value (ဥပမာ -1): ပုံမှန်ထက် နိမ့်တဲ့ အထပ်ကို ရောက်သွားပါမယ်။ (အထူးသဖြင့် စာသားတွေရဲ့ အနောက်ဘက်မှာ Background အဖြစ် ထားချင်တဲ့အခါမျိုးမှာ အသုံးများပါတယ်)
Auto: ဒါကတော့ Default တန်ဖိုးပါ။ သူ့ကို အုပ်ထားတဲ့ မိဘ (Parent) ရဲ့ Stack Level အတိုင်းပဲ ပုံမှန် လိုက်နေမှာပါ။

အရေးကြီးဆုံး အချက် ⚠️

ဒီနေရာမှာ အရေးအကြီးဆုံး သတိထားရမယ့် အချက်တစ်ခု ရှိပါတယ်။ z-index အလုပ်လုပ်ဖို့ဆိုရင် အဲဒီ Element မှာ position Property တစ်ခုခု (ဥပမာ - relative, absolute, fixed, sticky တစ်ခုခု) မဖြစ်မနေ ပေးထားဖို့ လိုအပ်ပါတယ်။ (တကယ်လို့ position: static (Default) ဖြစ်နေမယ်ဆိုရင်တော့ z-index က လုံးဝ အလုပ်လုပ်မှာ မဟုတ်ပါဘူး ခင်ဗျာ)

Note: Flexbox သို့မဟုတ် Grid item တွေမှာတော့ position မပေးထားလည်း z-index သုံးလို့ ရပါတယ်။

ဥပမာ

.box-bottom {
  position: relative;
  z-index: 1; /* အောက်ဆုံးမှာ နေမယ် */
  background-color: red;
}

.box-middle {
  position: absolute;
  z-index: 5; /* အလယ်မှာ နေမယ် */
  background-color: yellow;
  top: 20px;
  left: 20px;
}

.box-top {
  position: absolute;
  z-index: 10; /* အပေါ်ဆုံးမှာ နေမယ် */
  background-color: blue;
  top: 40px;
  left: 40px;
}

Stacking Context (အထပ်များ ဖွဲ့စည်းပုံ)

ဒီသဘောတရားလေးက နည်းနည်းလေး ရှုပ်ထွေးနိုင်ပေမဲ့ မဖြစ်မနေ သိထားသင့်ပါတယ်။ မှတ်ထားရမယ့် ရွှေစည်းမျဉ်းကတော့ - “Parent Element (မိဘ) ရဲ့ z-index က နိမ့်နေမယ်ဆိုရင်၊ သူ့ရဲ့ သားသမီး (Child) Element မှာ z-index ကို ဂဏန်း ဘယ်လောက်ပဲ အများကြီး ပေးထားပါစေ၊ သူတို့ မိဘရဲ့ အပေါ်မှာရှိနေတဲ့ တခြား Element တွေကို ဘယ်လိုမှ ကျော်တက်လို့ မရပါဘူး” ဆိုတာပါပဲ။

ဥပမာ -

Parent A (z-index: 1)
- Child A1 (z-index: 9999)
Parent B (z-index: 2)
- Child B1 (z-index: 1)

အပေါ်က ဥပမာမှာဆိုရင် Parent B (z-index: 2) က Parent A (z-index: 1) ထက် ပိုမြင့်နေတဲ့အတွက်၊ Parent B ရဲ့ သားသမီးဖြစ်တဲ့ Child B1 (z-index: 1) ဟာ Child A1 (z-index: 9999) ထက် ဂဏန်းနည်းနေပေမဲ့လည်း၊ သူ့မိဘရဲ့ အရှိန်ကြောင့် အပေါ်ဆုံးမှာ ရှိနေမှာပဲ ဖြစ်ပါတယ် ခင်ဗျာ။