In This Article

သင့် CSS ရှိ ဒြပ်စင်တစ်ခုတွင် z-index- 99999 ကို သတ်မှတ်ခဲ့ဖူးပြီး ၎င်းသည် အခြားဒြပ်စင်များပေါ်တွင် ပေါ်မလာပါ။ မတူညီသောဒြပ်စင်အားလုံးကို နိမ့်သောတန်ဖိုးဖြင့် သတ်မှတ်သည်ဖြစ်စေ လုံးဝမသတ်မှတ်ထားဟု ယူဆပါက အဆိုပါဒြပ်စင်ကို အခြားအရာများ၏အပေါ်တွင် မြင်သာထင်သာမြင်သာအောင် ကြီးမားသောတန်ဖိုးကို အလွယ်တကူထားသင့်သည်။ ဝဘ်စာမျက်နှာကို အများအားဖြင့် နှစ်ဘက်မြင် အာကာသအတွင်း ကိုယ်စားပြုသည်။ သို့သော်၊ တိကျသော CSS ဂုဏ်သတ္တိများကို အသုံးပြုခြင်းဖြင့်၊ စိတ်ကူးယဉ် z-axis လေယာဉ်ကို အတိမ်အနက်ဖော်ပြရန် မိတ်ဆက်ပေးသည်။ ဤလေယာဉ်သည် ဖန်သားပြင်နှင့် ထောင့်မှန်ဖြစ်ပြီး ၎င်းမှ အသုံးပြုသူသည် ဒြပ်စင်များ၏ အစီအစဥ်ကို ရိပ်မိပြီး၊ အခြားတစ်ခု၏ အပေါ်မှ တစ်ခုဖြစ်သည်။ စိတ်ကူးယဉ် z-ဝင်ရိုးနောက်ကွယ်ရှိ အိုင်ဒီယာ၊ stacked ဒြပ်စင်များကို အသုံးပြုသူ၏ ခံယူချက်မှာ၊ ၎င်းကို ဖန်တီးသည့် CSS ဂုဏ်သတ္တိများသည် stacking context ဟုခေါ်သည့် ပုံစံအဖြစ် ပေါင်းစပ်ထားခြင်းဖြစ်သည်။ ဝဘ်စာမျက်နှာပေါ်တွင် ဒြပ်စင်များကို မည်သို့ “စုပုံထားသည်”၊ အစုအစည်းအစီအမံကို ထိန်းချုပ်သည့်အရာနှင့် လိုအပ်သည့်အခါတွင် “မစွတ်မချခြင်း” အစိတ်အပိုင်းများကို လက်တွေ့ကျသော နည်းလမ်းများအကြောင်း ဆွေးနွေးသွားပါမည်။ Stacking Contexts အကြောင်း သင့်ဝဘ်စာမျက်နှာကို စားပွဲခုံတစ်ခုအဖြစ် မြင်ယောင်ကြည့်ပါ။ HTML ဒြပ်စင်များထည့်လိုက်သည်နှင့် စားပွဲပေါ်တွင် စာရွက်အပိုင်းအစများကို တစ်ခုပြီးတစ်ခု တင်နေပါသည်။ တင်ထားသော နောက်ဆုံးစာရွက်အပိုင်းသည် မကြာသေးမီက ထပ်ထည့်ထားသည့် HTML အစိတ်အပိုင်းနှင့် ညီမျှပြီး ၎င်းသည် ၎င်း၏ရှေ့တွင် ချထားသော အခြားစာရွက်များအားလုံး၏ အပေါ်၌ ရှိနေသည်။ ဤသည်မှာ nested အစိတ်အပိုင်းများအတွက်ပင်၊ ပုံမှန်စာရွက်စာတမ်းစီးဆင်းမှုဖြစ်သည်။ စားပွဲသည် အခြားဖိုင်တွဲများအားလုံးပါ ၀ င်သည့် ဒြပ်စင်ဖြင့်ဖွဲ့စည်းထားသော root stacking အကြောင်းအရာကိုကိုယ်စားပြုသည်။ ယခု၊ တိကျသော CSS ဂုဏ်သတ္တိများ ပါဝင်လာပါပြီ။ အနေအထား (z-index)၊ အလင်းပိတ်၊ အသွင်ပြောင်း၊ နှင့် ပါ၀င်သည်) ကဲ့သို့သော ဂုဏ်သတ္တိများသည် ဖိုဒါတစ်ခုကဲ့သို့ လုပ်ဆောင်သည်။ ဤဖိုင်တွဲသည် ဒြပ်စင်တစ်ခုနှင့် ၎င်း၏ကလေးများအားလုံးကို ယူဆောင်ကာ ပင်မစတက်ခ်မှ ထုတ်ယူကာ ၎င်းတို့ကို သီးခြားခွဲအကန့်တစ်ခုအဖြစ် စုစည်းကာ stacking context ဟုခေါ်သည့်အရာကို ဖန်တီးသည်။ နေရာချထားသော ဒြပ်စင်များအတွက်၊ ကျွန်ုပ်တို့သည် အော်တိုမဟုတ်သော အခြား z-အညွှန်းတန်ဖိုးကို ကြေညာသည့်အခါ ၎င်းသည် ဖြစ်ပေါ်လာသည်။ အလင်းပိတ်ခြင်း၊ အသွင်ပြောင်းခြင်းနှင့် စစ်ထုတ်ခြင်းကဲ့သို့သော ဂုဏ်သတ္တိများအတွက်၊ တိကျသောတန်ဖိုးများကို အသုံးပြုသောအခါတွင် stacking context ကို အလိုအလျောက် ဖန်တီးပေးပါသည်။

ဒါကို နားလည်အောင်ကြိုးစားပါ- ဖိုင်တစ်ခု (ဆိုလိုသည်မှာ ကလေးဒြပ်စင်) သည် ဖိုဒါတစ်ခုအတွင်း (ဥပမာ၊ မိဘ၏စုပုံထားသော အကြောင်းအရာ) သည် ဖိုင်တွဲမှထွက်ခြင်း သို့မဟုတ် အခြားဖိုင်တွဲတစ်ခုရှိ စာရွက်များကြားတွင် ထားရှိခြင်းကို ဘယ်သောအခါမှ မရနိုင်ပါ။ ၎င်း၏ z-အညွှန်းသည် ယခုအခါ ၎င်း၏ကိုယ်ပိုင်ဖိုင်တွဲအတွင်းသာ သက်ဆိုင်ပါသည်။

အောက်တွင်ဖော်ပြထားသောပုံဥပမာတွင်၊ Paper B သည် Folder B ၏ stacking context အတွင်းတွင်ရှိပြီး၊ folder အတွင်းရှိအခြားစာရွက်များဖြင့်သာ အမိန့်ပေးနိုင်ပါသည်။

သင်အလိုရှိပါက သင့်စားပွဲပေါ်တွင် ဖိုင်တွဲနှစ်ခုရှိသည်ကို မြင်ယောင်ကြည့်ပါ-

.folder-a { z-index: 1; } .folder-b { z-index: 2; }

Markup ကို နည်းနည်းလောက် Update လုပ်ကြည့်ရအောင်။ Inside Folder A သည် အထူးစာမျက်နှာဖြစ်သည်၊ z-index- 9999။ အတွင်း Folder B သည် ရိုးရိုးစာမျက်နှာဖြစ်သည်၊ z-index- 5။

.special-page { z-index: 9999; } .plain-page { z-index: 5; }

ဘယ်စာမျက်နှာက ထိပ်ဆုံးမှာ ရောက်နေလဲ။ ၎င်းသည် Folder B ရှိ .plain-page ဖြစ်သည်။ ဘရောက်ဆာသည် ကလေးစာရွက်များကို လျစ်လျူရှုပြီး ဖိုင်တွဲနှစ်ခုကို ဦးစွာစုထားသည်။ Folder B (z-index: 2) ကိုမြင်ရပြီး Folder A (z-index: 1) ၏ထိပ်တွင် နှစ်ခုသည် တစ်ခုထက်ကြီးသည်ဟု ကျွန်ုပ်တို့သိသောကြောင့်ဖြစ်သည်။ ဤအတောအတွင်း၊ .special-page သည် z-index-9999 စာမျက်နှာသည် ၎င်း၏ z-အညွှန်းကို ဖြစ်နိုင်ချေအမြင့်ဆုံးတန်ဖိုးအဖြစ် သတ်မှတ်ထားသော်လည်း stack ၏အောက်ခြေတွင်ရှိသည်။ စုပုံခြင်းဆိုင်ရာ အကြောင်းအရာများကို “family tree” ဖန်တီးခြင်း (ဖိုင်တွဲများအတွင်း ဖိုင်တွဲများ) ကိုလည်း nested လုပ်နိုင်ပါသည်။ တူညီသောနိယာမသည် အကျုံးဝင်သည်- ကလေးသည် ၎င်း၏မိဘများ၏ဖိုင်တွဲကို ဘယ်တော့မှ မလွတ်မြောက်နိုင်ပါ။ စုပုံထားသော အကြောင်းအရာများသည် အုပ်စုဖွဲ့ပြီး အလွှာများကို ပြန်စီရန် ဖိုင်တွဲများကဲ့သို့ ပြုမူပုံတို့ကို ယခု သင်ရလာသောအခါတွင်၊ အဘယ်ကြောင့် အချို့သော ဂုဏ်သတ္တိများ — အသွင်ပြောင်းခြင်းနှင့် အလင်းပိတ်ခြင်းကဲ့သို့ — စစည်းခြင်းဆိုင်ရာ အကြောင်းအရာများကို အသစ်ဖန်တီးကြသနည်း။ ဤအရာသည် ဤအရာဖြစ်သည်- ဤဂုဏ်သတ္တိများသည် ၎င်းတို့ပုံသဏ္ဍာန်ကြောင့် အတွဲလိုက်ဆက်စပ်မှုများကို မဖန်တီးနိုင်ပါ။ ဘရောက်ဆာ hood အောက်မှာ အလုပ်လုပ်ပုံကြောင့် အဲဒါကို လုပ်တာပါ။ အသွင်ပြောင်းခြင်း၊ အလင်းပိတ်ခြင်း၊ စစ်ထုတ်ခြင်း သို့မဟုတ် ရှုထောင့်ကို သင်အသုံးပြုသောအခါ၊ သင်သည် ဘရောင်ဇာအား "ဟေး၊ ဤဒြပ်စင်သည် ရွေ့လျားနိုင်သည်၊ လှည့်ပတ်နိုင်သည်၊ သို့မဟုတ် မှိန်သွားနိုင်သည်၊ ထို့ကြောင့် အသင့်ပြင်ပါ။"

ဤဂုဏ်သတ္တိများကို သင်အသုံးပြုသောအခါ၊ တင်ဆက်မှုကို ပိုမိုထိရောက်စွာ စီမံခန့်ခွဲရန် ဘရောက်ဆာသည် stacking context အသစ်ကို ဖန်တီးပေးပါသည်။ ၎င်းသည် ဘရောက်ဆာအား ကာတွန်းများ၊ အသွင်ပြောင်းခြင်းနှင့် အမြင်အာရုံသက်ရောက်မှုများကို လွတ်လပ်စွာ ကိုင်တွယ်ဆောင်ရွက်နိုင်စေကာ၊ ဤအရာများသည် စာမျက်နှာ၏ကျန်နှင့် မည်သို့အပြန်အလှန်အကျိုးသက်ရောက်ပုံကို ပြန်လည်တွက်ချက်ရန် လိုအပ်မှုကို လျှော့ချနိုင်စေပါသည်။ "ဒီဖိုဒါကို သီးခြားစီ ကိုင်တွယ်သွားမှာပါ" ဟု ဘရောက်ဆာပြောသည့်အတိုင်း စဉ်းစားကြည့်ပါက ၎င်းအတွင်း၌ တစ်စုံတစ်ရာ ပြောင်းလဲသည့်အခါတိုင်း စားပွဲတစ်ခုလုံးကို အပြောင်းအလဲလုပ်ရန် မလိုအပ်ပါ။" ဒါပေမယ့်ရှိတယ်။ဘေးထွက်ဆိုးကျိုးတစ်ခု။ ဘရောင်ဇာသည် ဒြပ်စင်တစ်ခုကို ၎င်း၏ကိုယ်ပိုင်အလွှာသို့ လွှင့်တင်လိုက်သည်နှင့် တစ်ပြိုင်နက်၊ ၎င်းသည် အစုအစည်းအသစ်တစ်ခုကို ဖန်တီးကာ ၎င်းအတွင်းရှိ အရာအားလုံးကို “ပြားချပ်ချပ်” ပေးရမည်ဖြစ်သည်။ သီးခြားစီကိုင်တွယ်ရန် စားပွဲမှ ဖိုင်တွဲတစ်ခုကို ဖယ်ရှားလိုက်သလိုမျိုး၊ ထိုဖိုင်တွဲအတွင်းရှိ အရာအားလုံးကို အုပ်စုဖွဲ့ပြီး ယခုအခါ ဘရောက်ဆာသည် ၎င်းအား မည်သည့်အရာအပေါ်တွင် ရှိနေသည်ကို ဆုံးဖြတ်သည့်အခါ ၎င်းကို ယူနစ်တစ်ခုတည်းအဖြစ် သတ်မှတ်သည်။ ထို့ကြောင့် အသွင်ပြောင်းခြင်းနှင့် အလင်းပိတ်ခြင်း ဂုဏ်သတ္တိများသည် ဒြပ်စင်များကို အမြင်အာရုံဖြင့် ပေါင်းစည်းသည့်ပုံစံအပေါ် သက်ရောက်မှုရှိပုံမပေါ်သော်လည်း ၎င်းတို့သည် လုပ်ဆောင်ကြပြီး ၎င်းသည် စွမ်းဆောင်ရည်ပိုကောင်းအောင်ပြုလုပ်ရန်ဖြစ်သည်။ အခြားသော CSS ဂုဏ်သတ္တိများစွာသည်လည်း အလားတူအကြောင်းပြချက်များအတွက် stacking contexts ကို ဖန်တီးနိုင်သည်။ သင်ပိုမိုနက်ရှိုင်းစွာတူးလိုပါက MDN သည်စာရင်းအပြည့်အစုံကိုပေးသည်။ အနည်းငယ်မျှသာ ရှိသည်၊ ၎င်းကို မသိဘဲ stacking context ကို အမှတ်မထင် ဖန်တီးရန် မည်မျှ လွယ်ကူကြောင်း သာဓက သာဓက ရှိပါသည်။ "Unstacking" ပြဿနာ စုပုံခြင်းပြဿနာများသည် အကြောင်းအမျိုးမျိုးကြောင့် ဖြစ်ပေါ်လာနိုင်သော်လည်း အချို့မှာ အခြားအရာများထက် ပိုမိုအဖြစ်များပါသည်။ Modal အစိတ်အပိုင်းများသည် အခြားဒြပ်စင်များထက် ထိပ်တန်းအလွှာတစ်ခုပေါ်တွင် အစိတ်အပိုင်းအား "ဖွင့်ရန်" ကို ခလုတ်နှိပ်ရန် လိုအပ်သောကြောင့် ၎င်းတို့သည် ဂန္တဝင်ပုံစံတစ်ခုဖြစ်ပြီး ၎င်းကို "ပိတ်သွားသောအခါတွင်" အပေါ်ဆုံးအလွှာမှ ဖယ်ရှားခြင်းဖြစ်သည်။ ကျွန်ုပ်တို့အားလုံးသည် ကျွန်ုပ်တို့သည် မော်ဒယ်တစ်ခုဖွင့်သည့် အခြေအနေသို့ ရောက်ရှိလာကြပြီး မည်သည့်အကြောင်းကြောင့်ပင် ဖြစ်မလာသည်ကို ကျွန်ုပ်ယုံကြည်ပါသည်။ ၎င်းသည် ကောင်းစွာမဖွင့်ရခြင်းမဟုတ်သော်လည်း stacking context ၏အောက်ပိုင်းအလွှာတွင် ၎င်းကို မမြင်နိုင်ပါ။ ဒါက မင်းကို "ဘယ်လိုရောက်လာတာလဲ" လို့ တွေးမိစေတယ်။ သင်သတ်မှတ်ကတည်းက

.ထပ်ဆင့် { ရာထူး- ပုံသေ; /* stacking context ကို ဖန်တီးသည်*/ z-အညွှန်း: 1; /* element ကို အခြားအရာအားလုံးရဲ့ အထက်အလွှာတစ်ခုပေါ်မှာ တင်ထားပေးပါတယ်*/ inset: 0; အကျယ်: 100%; အမြင့်: 100vh; ပြည့်လျှံ: ဝှက်ထား; နောက်ခံအရောင်- #00000080; }

၎င်းသည် မှန်ကန်ပုံရသည်၊ သို့သော် modal trigger ပါရှိသော ပင်မဒြပ်စင်သည် z-index-1 ဟုလည်းသတ်မှတ်ထားသည့် အခြားပင်မဒြပ်စင်အတွင်း ကလေးဒြပ်စင်ဖြစ်ပါက၊ ၎င်းသည် ပင်မဖိုင်တွဲမှ ဖုံးကွယ်ထားသော sublayer တွင် modal ကို နည်းပညာအရ နေရာချပေးသည်။ ထိုသတ်သတ်မှတ်မှတ်အခြေအနေနှင့် အခြားသော တူညီသော stacking-context pitfalls အချို့ကို ကြည့်ကြပါစို့။ မရည်ရွယ်ဘဲ စုပုံထားသော အကြောင်းအရာများကို ဖန်တီးရန် မည်မျှလွယ်ကူသည်သာမက ၎င်းတို့ကို မှားယွင်းစွာ စီမံခန့်ခွဲနည်းကိုလည်း သင်မြင်နိုင်မည်ဟု ထင်ပါသည်။ ထို့အပြင် သင်သည် စီမံခန့်ခွဲသည့်နိုင်ငံသို့ မည်သို့ပြန်သွားရမည်ဆိုသည့် အခြေအနေပေါ်တွင် မူတည်သည်။ ဇာတ်လမ်း 1- ပိတ်မိသောပုံစံ

အဆင့်နိမ့်အလွှာတွင် ပိတ်မိနေသော သင်၏ modal ကို ချက်ချင်းတွေ့နိုင်ပြီး မိဘကို ခွဲခြားနိုင်သည်။ ဘရောက်ဆာ တိုးချဲ့မှုများ စမတ်ကျသော developer များသည် ကူညီရန် extension များကို ဖန်တီးထားသည်။ ဤ "CSS Stacking Context Inspector" Chrome extension ကဲ့သို့သော တူးလ်များသည် stacking context ကိုဖန်တီးသည့်ဒြပ်စင်များအကြောင်း အချက်အလက်များကို သင့်အားပြသရန် သင့် DevTools သို့ အပို z-index တက်ဘ်တစ်ခုကို ပေါင်းထည့်ပါသည်။

IDE တိုးချဲ့မှုများ သင့်အယ်ဒီတာတွင် ဖြစ်နိုင်ချေရှိသော stacking context ပြဿနာများကို တိုက်ရိုက်မီးမောင်းထိုးပြသည့် VS Code အတွက် ဤကဲ့သို့သော တိုးချဲ့မှုတစ်ခုဖြင့် ဖွံ့ဖြိုးတိုးတက်မှုကာလအတွင်း ပြဿနာများကိုပင် သင်တွေ့ရှိနိုင်သည်။

ထိန်းချုပ်မှုကို ဖြုတ်ပြီး ပြန်လည်ရယူခြင်း။ မူလအကြောင်းအရင်းကို ကျွန်ုပ်တို့ဖော်ထုတ်ပြီးနောက်၊ နောက်တစ်ဆင့်မှာ ၎င်းကိုဖြေရှင်းရန်ဖြစ်သည်။ ဤပြဿနာကို ဖြေရှင်းရန် သင်လုပ်ဆောင်နိုင်သော နည်းလမ်းများစွာရှိပြီး ၎င်းတို့ကို အစီအစဥ်အတိုင်း စာရင်းပေးပါမည်။ မည်သည့်အဆင့်တွင်မဆို သင်ရွေးချယ်နိုင်သည်။ အဘယ်သူမျှ မတိုင်ကြားနိုင်၊ HTML Structure ကိုပြောင်းပါ။ ဒါဟာ အကောင်းဆုံးပြင်ဆင်မှုလို့ ယူဆပါတယ်။ stacking context issue မှာ သင် run ဖို့ အတွက်၊ သင့် HTML ထဲမှာ ရယ်စရာကောင်းတဲ့ နေရာတွေမှာ တစ်ချို့ element တွေကို ထားရပါမယ်။ စာမျက်နှာကို ပြန်လည်ဖွဲ့စည်းခြင်းသည် DOM ကို ပြန်လည်ပုံဖော်ရန်နှင့် stacking context ပြဿနာကို ဖယ်ရှားရန် ကူညီပေးပါမည်။ ပြဿနာရှိသောဒြပ်စင်ကိုရှာပြီး HTML အမှတ်အသားရှိ ထောင်ချောက်ဒြပ်စင်မှ ၎င်းကိုဖယ်ရှားပါ။ ဥပမာအားဖြင့်၊ ကျွန်ုပ်တို့သည် .modal-container အား ခေါင်းစီးမှနေ၍ ဒြပ်စင်တွင် သူ့ဘာသာသူ ထားခြင်းဖြင့် ပထမဆုံး ဇာတ်လမ်းဖြစ်သော "The Trapped Modal" ကို ဖြေရှင်းနိုင်ပါသည်။

"Open Modal" ခလုတ်ကို နှိပ်လိုက်သောအခါတွင်၊ Modal ကို အခြားအရာအားလုံး၏ ရှေ့တွင် နေရာယူထားသည်ဟု ယူဆပါသည်။ Pen Scenario 1- Shoyombo Gabriel Ayomide မှ Trapped Modal (ဖြေရှင်းချက်) [လမ်းခွဲ] ကိုကြည့်ပါ။ ညှိပါ။CSS တွင် Parent Stacking Context အဆင်အပြင်ကို မဖျက်ဘဲ သင်မရွေ့နိုင်သော အရာတစ်ခုဖြစ်ပါက မည်သို့နည်း။ ပြဿနာကို ဖြေရှင်းရန် ပိုကောင်းသည်- မိဘက အကြောင်းအရာကို သတ်မှတ်ပေးသည်။ အကြောင်းအရာကို အစပျိုးရန် တာဝန်ရှိသော CSS ပိုင်ဆိုင်မှု (သို့မဟုတ် ဂုဏ်သတ္တိများ) ကို ရှာပြီး ၎င်းကို ဖယ်ရှားပါ။ ၎င်းတွင် ရည်ရွယ်ချက်ရှိပြီး ဖယ်ရှား၍မရပါက၊ ကွန်တိန်နာတစ်ခုလုံးကို လွှင့်တင်ရန်အတွက် ၎င်း၏ပေါက်ဖော်ဒြပ်စင်များထက် ပိုမိုမြင့်မားသော z-index တန်ဖိုးကို မိဘအား ပေးပါ။ ပိုများသော z-အညွှန်းတန်ဖိုးဖြင့်၊ ပင်မကွန်တိန်နာသည် ထိပ်ဘက်သို့ ရွေ့သွားပြီး ၎င်း၏ကလေးများသည် အသုံးပြုသူနှင့် ပိုမိုနီးကပ်လာပါသည်။ "နစ်မြုပ်နေသော Dropdown" ဇာတ်လမ်းတွင် ကျွန်ုပ်တို့ သင်ယူခဲ့ရာကို အခြေခံ၍ အောက်ဆွဲချခြင်းကို navbar မှ ရွှေ့၍မရပါ။ အဓိပ္ပာယ်ရှိမည်မဟုတ်ပါ။ သို့သော်၊ ကျွန်ုပ်တို့သည် .content ဒြပ်စင်၏ z အညွှန်းတန်ဖိုးထက် .navbar ကွန်တိန်နာ၏ z အညွှန်းတန်ဖိုးကို တိုးမြှင့်နိုင်သည်။ .navbar { နောက်ခံ- #333; /* z-index: 1; */ z-အညွှန်း: 3; ရာထူး: ဆွေမျိုး; }

ဤပြောင်းလဲမှုနှင့်အတူ၊ .dropdown-menu သည် ပြဿနာတစ်စုံတစ်ရာမရှိဘဲ အကြောင်းအရာ၏ရှေ့တွင် ယခုပေါ်လာပါသည်။ Pen Scenario 2- Shoyombo Gabriel Ayomide မှ Submerged Dropdown (ဖြေရှင်းချက်) [လမ်းခွဲ] ကိုကြည့်ပါ။ Framework ကိုအသုံးပြုပါက Portals ကိုစမ်းကြည့်ပါ။ React သို့မဟုတ် Vue ကဲ့သို့သော မူဘောင်များတွင်၊ Portal သည် DOM ရှိ ၎င်း၏သာမန်မိဘအဆင့်များအပြင်ဘက်တွင် အစိတ်အပိုင်းတစ်ခုကို တင်ဆက်နိုင်စေမည့် အင်္ဂါရပ်တစ်ခုဖြစ်သည်။ Portals များသည် သင်၏ အစိတ်အပိုင်းများ အတွက် တယ်လီပို့ခြင်း စက်နှင့် တူပါသည်။ ၎င်းတို့သည် သင့်အား အစိတ်အပိုင်းတစ်ခု၏ HTML ကို စာရွက်စာတမ်းရှိ မည်သည့်နေရာတွင်မဆို (ပုံမှန်အားဖြင့် document.body တွင် မှန်ကန်စွာ) တင်ဆက်နိုင်စေပြီး ၎င်းအား ၎င်း၏မူရင်းမိဘနှင့် ယုတ္တိရှိရှိချိတ်ဆက်ထားကာ props၊ state နှင့် event များအတွက်ဖြစ်သည်။ ပြန်ဆိုထားသော အထွက်သည် ပြဿနာရှိသော ပင်မကွန်တိန်နာအပြင်ဘက်တွင် စာသားအတိုင်း ပေါ်လာသောကြောင့် ၎င်းသည် စုစည်းထားသော ဆက်စပ်ထောင်ချောက်များကို လွတ်မြောက်ရန်အတွက် သင့်လျော်ပါသည်။ ReactDOM.createPortal( ၊ document.body );

ဤအရာက သင့် dropdown content ကို ၎င်း၏မိဘနောက်ကွယ်တွင် ဝှက်ထားခြင်းမရှိကြောင်း သေချာစေသည်- ၊ ဝှက်ထားသော သို့မဟုတ် နိမ့်သော z-index တစ်ခုဖြစ်သည်။ အစောပိုင်းတွင် ကျွန်ုပ်တို့ကြည့်ရှုခဲ့သည့် "ကလစ်လုပ်ကိရိယာအကြံပြုချက်" မြင်ကွင်းတွင်၊ ကျွန်ုပ်သည် ကိရိယာထိပ်ဖျားမှ ကိရိယာထိပ်ဖျားကို ကယ်တင်ရန် ပေါ်တယ်ကို အသုံးပြုခဲ့သည်- စာရွက်စာတမ်းကိုယ်ထည်တွင် ထားရှိကာ ကွန်တိန်နာအတွင်း ခလုတ်အထက်တွင် နေရာချထားခြင်းဖြင့် ဝှက်ထားသောအပိုင်းကို အသုံးပြုခဲ့သည်။ Pen Scenario 3 ကိုကြည့်ပါ- Shoyombo Gabriel Ayomide မှ Clipped Tooltip (Solution) [ဖြတ်ထားသော]။ ဘေးထွက်ဆိုးကျိုးမရှိဘဲ Stacking Context ကို မိတ်ဆက်ခြင်း။ ယခင်အပိုင်းတွင် ရှင်းပြထားသည့် ချဉ်းကပ်မှုအားလုံးသည် ပြဿနာရှိသော stacking contexts မှ element များကို "unstacking" အတွက် ရည်ရွယ်သည်၊ သို့သော် သင် အမှန်တကယ် လိုအပ်မည့် သို့မဟုတ် stacking context ကို ဖန်တီးလိုသည့် အခြေအနေအချို့ရှိပါသည်။ stacking context အသစ်တစ်ခုဖန်တီးခြင်းသည် လွယ်ကူသော်လည်း၊ ချဉ်းကပ်မှုအားလုံးသည် ဘေးထွက်ဆိုးကျိုးတစ်ခုပါရှိသည်။ isolation: isolate ကိုအသုံးပြုခြင်းမှလွဲ၍ ဆိုလိုသည်မှာ၊ ဒြပ်စင်တစ်ခုသို့ အသုံးချသောအခါ၊ ထိုဒြပ်စင်၏ ကလေးများ၏ အစုအဝေးအကြောင်းအရာကို ပြင်ပဒြပ်စင်များက လွှမ်းမိုးခြင်းထက် ကလေးတစ်ဦးစီနှင့် ထိုအကြောင်းအရာအတွင်း ဆက်စပ်မှုကို ဆုံးဖြတ်သည်။ မူရင်းဥပမာတစ်ခုသည် z-index--1 ကဲ့သို့သော အနုတ်တန်ဖိုးကို ထိုဒြပ်စင်အား သတ်မှတ်ပေးခြင်းဖြစ်သည်။ သင့်တွင် .card အစိတ်အပိုင်းတစ်ခုရှိသည်ဟု မြင်ယောင်ကြည့်ပါ။ သင်သည် .card ၏စာသားနောက်တွင်ရှိသော်လည်း ကတ်၏နောက်ခံအပေါ်တွင် အလှဆင်ထားသောပုံစံကို သင်ထည့်လိုသည်။ ကတ်ပေါ်တွင် ပေါင်းစည်းထားသော ဆက်စပ်အကြောင်းအရာမရှိဘဲ၊ z-index: -1 သည် ပုံသဏ္ဍာန်ကို အမြစ်စည်းခြင်းအကြောင်းအရာ (စာမျက်နှာတစ်ခုလုံး) ၏အောက်ခြေသို့ ပေးပို့သည်။ ၎င်းသည် .card ၏အဖြူရောင်နောက်ခံနောက်ကွယ်တွင် ပျောက်ကွယ်သွားစေသည်။ Shoyombo Gabriel Ayomide မှ Pen Negative z-index (ပြဿနာ) ကိုကြည့်ပါ။ ၎င်းကိုဖြေရှင်းရန်၊ ကျွန်ုပ်တို့သည် သီးခြားခွဲထုတ်ကြောင်းကြေငြာသည်- မိဘ .card တွင် သီးခြားခွဲထားသည်- Shoyombo Gabriel Ayomide မှ Pen Negative z-index (solution) ကိုကြည့်ပါ။ ယခု၊ .card ဒြပ်စင်ကိုယ်တိုင်က stacking context ဖြစ်သွားပါပြီ။ ၎င်း၏ ကလေးဒြပ်စင် — : pseudo-element တွင် ဖန်တီးထားသော အလှဆင်ပုံသဏ္ဍာန် — z-index--1 ရှိသောအခါ၊ ၎င်းသည် မိဘ၏ stacking context ၏အောက်ခြေသို့ရောက်သွားသည်။ ရည်ရွယ်ထားသည့်အတိုင်း ကတ်၏နောက်ခံအပေါ်တွင် စာသား၏နောက်တွင် စုံလင်စွာတည်ရှိသည်။ နိဂုံး သတိရပါ- သင်၏ z-အညွှန်းသည် နောက်တစ်ကြိမ် ထိန်းချုပ်မှုမရှိတော့သည့်အခါ၊ ၎င်းသည် ပိတ်မိနေသော stacking ဆက်စပ်မှုတစ်ခုဖြစ်သည်။ ကိုးကား

စုပုံခြင်းအကြောင်းအရာ (MDN) Z-အညွှန်းနှင့် တွဲနေသော အကြောင်းအရာများ (web.dev) "CSS တွင် သီးခြားပိုင်ဆိုင်မှုနှင့် Stacking Context အသစ်တစ်ခုဖန်တီးနည်း" Natalie Pina "ဟင် ဘာလဲ၊ z-index?"၊ Josh Comeau

SmashingMag တွင်ဆက်လက်ဖတ်ရှုပါ။

"ကြီးမားသောပရောဂျက်များတွင် CSS Z-Index ကိုစီမံခန့်ခွဲခြင်း" Steven Frieson “စေးကပ်သော ခေါင်းစီးများနှင့် အမြင့် အစိတ်အပိုင်းများ- ရှုပ်ထွေးသော ပေါင်းစပ်မှု” Philip Braunen Pavel Pomerantsev၊ “Z-Index CSS Property- ပြည့်စုံသော အသွင်အပြင်”၊ Louis Lazaris

You May Also Like

13 Trending Songs on TikTok in March 2026 (+ How to Use Them)

Our Best AI PM Workflows for Prototyping, Strategy, and Personal OS (2026)

China’s Cybersecurity Agency Issues Security Warning About OpenClaw