Z-Index

z-index က positioned elements တွေရဲ့ stack order ကိုထိန်းပါတယ်။ တန်ဖိုးကြီးလေ အပေါ်ရောက်လေပါ။ Modal, dropdown, tooltip, sticky header တွေမှာ မကြာခဏလိုပါတယ်။ သတိထားရမှာက z-index က stacking context ထဲမှာပဲအလုပ်လုပ်တာပါ။ တစ်ခါတလေ 9999 ထည့်လည်းမတက်တာက CSS က ဒေါသထွက်တာမဟုတ်၊ stacking context ကြောင့်ပါ။

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
}

.modal {
  position: fixed;
  z-index: 101;
}

Backdrop က page တစ်ခုလုံးကိုဖုံးပြီး modal box က backdrop အပေါ်မှာပေါ်ပါမယ်။