ကက်စကိတ်ပုံစံစာရွက်များနှင့်အတူ positioning ထပ်နေ Element တွေကို
စိန်ခေါ်မှုများတစ်ခုမှာဝဘ်စာမျက်နှာအပြင်အဆင်များအတွက် CSS ကို positioning ကိုအသုံးပြုတဲ့အခါသင့်ရဲ့ဒြပ်စင်အချို့ကိုအခြားသူများကိုထပ်စေခြင်းငှါဖြစ်ပါသည်။ ဤသည်ကိုသင် HTML မှာပြီးခဲ့သည့်ဒြပ်စင်ထိပ်ပေါ်မှာဖြစ်လိုလျှင်ဒဏ်ငွေအလုပ်လုပ်တယ်, ဒါပေမယ့်သင်သည်အဘယ်သို့မကျင့်ဒါမှမဟုတ်ဘာလျှင်သင်သည်လက်ရှိတွင်အဲဒီလိုလုပ်ဖို့အခြားသူတွေထပ်မဒြပ်စင်များရှိသည်ဖို့လိုလျှင်ဒီဇိုင်းဒီ "အလွှာ" ကြည့်ဘို့ခေါ်ဆိုသောကြောင့်, ? ဒြပ်စင်သင် CSS ကို၏ပစ္စည်းဥစ္စာပိုင်ဆိုင်မှုကိုအသုံးပြုရန်လိုအပ်ထပ်လမ်းကိုပြောင်းလဲပစ်နိုင်ရန်အတွက်။
သငျသညျသမ်မာကမျြးနှင့် PowerPoint သို့မဟုတ် Adobe က Photoshop ကိုတူသောပိုပြီးအားကောင်းတဲ့ပုံရိပ်အယ်ဒီတာတစ်ဦးဂရပ်ဖစ် tools တွေကိုအသုံးပြုခဲ့ပါတယ်လျှင်, အခွင့်အလမ်းတွေကိုသင် action ကိုအတွက် z-index ကိုတူတစ်ခုခုမြင်ရပါတယ်နေကြသည်။ ဤအစီအစဉ်များအတွက်သင်ရေးဆွဲင့်သောအရာဝတ္ထု (s) ကိုမီးမောင်းထိုးပြခြင်း, သို့မဟုတ်သင့်စာရွက်စာတမ်းအချို့ဒြပ်စင်များ "ရှေ့ဖို့ကိုယူခဲ့" "back မှ Send" တစ်ခု option ကိုရွေးချယ်နိုင်ပါသည်။ Photoshop မှာ, သင်သည်ဤလုပ်ဆောင်ချက်များကိုရှိသည်မဟုတ်ကြဘူး, ဒါပေမယ့်သင် program ကို၏ "အလွှာ" pane ထဲကမနှင့် Element တစ်ခုရဲ့သည်ဤအလွှာများအားပြန်လည်စီစဉ်ခြင်းအားဖြင့်ပတ္တူအတွက်ကျရောက်ရှိရာအရပ်၌သင်တို့စီစဉ်နိုင်ပါတယ်။ ဤဥပမာနှစ်ခုစလုံး၌, သငျသညျမရှိမဖြစ်လိုအပ်တဲ့သူတို့အားအရာဝတ္ထုများ၏ z-index ကို setting နေကြသည်။
z-index ကိုကဘာလဲ?
သင်စာမျက်နှာပေါ်တွင် element တွေကိုနေရာချဖို့ CSS ကို positioning ကိုအသုံးပြုနေသည့်အခါ, သင်သုံးဖက်မြင်စဉ်းစားရန်လိုပါတယ်။ ညာဘက် / လက်ဝဲနှင့်ထိပ်တန်း / အောက်ခြေ: နှစ်ခုစံအတိုင်းအတာရှိပါတယ်။ အောက်ခြေတထိပ် y ကိုအညွှန်းကိန်းစဉ်ညာဘက်အညွှန်းကိန်းမှလက်ဝဲ, x-အညွှန်းကိန်းအဖြစ်လူသိများသည်။ ဒီအသင်တို့သည်ဤနှစ်ခုအညွှန်းကိန်းကို အသုံးပြု. အလျားလိုက်သို့မဟုတ်ဒေါင်လိုက် element တွေကိုနေရာချမည်ဟုဘယ်လောက်ဖြစ်ပါတယ်။
အတွက်ကို web design ကိုမှကြွလာသောအခါ, စာမျက်နှာ၏ stack အလို့ငှာလည်းရှိသေး၏။ စာမကျြနှာပျေါမှာတစ်ခုချင်းစီဒြပ်စင်ကိုအခြားဒြပ်စင်အထက်တွင်သို့မဟုတ်အောက်တွင်ဖော်ပြထားသော layered နိုင်ပါသည်။ အဆိုပါ stack ထဲမှာတစ်ဦးချင်းစီဒြပ်စင်သည်အဘယ်မှာရှိ z-index property ကဆုံးဖြတ်သည်။ X-အညွှန်းကိန်းများနှင့်က y-index ကိုအလျားလိုက်နှင့်ဒေါင်လိုက်လိုင်းတွေရှိပါတယ်လျှင်, z-index ကိုစာမျက်နှာ၏အတိမ်အနက်ကို, မရှိမဖြစ်လိုအပ်တဲ့ဟာ 3rd အတိုင်းအတာဖြစ်ပါတယ်။
ငါစက္ကူအပိုင်းပိုင်းနှင့်အမျှတစ်ဦးဝက်ဘ်စာမျက်နှာပေါ်ရှိ element တွေကိုစဉ်းစားလို ဝဘ်စာမျက်နှာ တစ်ဦး collage အဖြစ်သူ့ဟာသူ။ ငါစက္ကူ positioning ကိုဆုံးဖြတ်သည်သည်, မည်မျှပြုလုပ်၏အခြားဒြပ်စင်များဖြင့်ဖုံးလွှမ်းနေသည်လျောင်းတော်မူရာ z-index ကိုဖြစ်ပါတယ်။
z-index နံပါတ်ဖြစ်ပါသည်, ဖြစ်စေအပြုသဘော (ဥပမာ 100) သို့မဟုတ်အနှုတ်လက္ခဏာ (ဥပမာ -100) ။ ကို default z-index ကိုအမြင့်ဆုံး z-index ကိုနှင့်အတူအဆိုပါဒြပ်စင်နိမ့်ဆုံး z-index ကိုဆင်းလာမယ့်အမြင့်မားဆုံးနှင့်ဒါပေါ်လိုက်, ထိပ်ပေါ်မှာဖြစ်ပါတယ် 0. ဖြစ်ပါတယ်။ ဒြပ်စင်နှစ်မျိုးလုံးအတူတူပဲ z-index ကိုတန်ဖိုး (သို့မဟုတ်ပါကသတ်မှတ်ထားသောမဟုတ်ရဲ့အသုံးပြုမှုပါ 0 င်များ၏က default value ကိုအဓိပ္ပာယ်) လျှင် browser ကိုသူတို့က HTML မှာပေါ်လာမိန့်မှာသူတို့ကိုထပ်ထားမည်ဖြစ်သည်။
z-index ကိုအသုံးပြုနည်းကိုဘယ်လို
သင့်ရဲ့ stack ထဲမှာတစ်ဦးကွဲပြားခြားနား z-index ကိုတန်ဖိုးကသင်ချင်ချင်းစီဒြပ်စင်ပေးပါ။ ဥပမာအားဖြင့်, ငါငါးခုကွဲပြားခြားနားသောဒြပ်စင်များရှိပါက:
- ဒြပ်စင် 1 - -25 ၏ z-index ကို
- ဒြပ်စင် 2 - 82 ၏ z-index ကို
- ဒြပ်စင် 3 - z-index ကိုမသတ်မှတ်
- ဒြပ်စင် 4 - 10 z-index ကို
- ဒြပ်စင် 5 - ၏ z-index ကို -3
သူတို့ကအောက်ပါနိုင်ရန်အတွက်သီးနှံများကိုပုံပါလိမ့်မယ်:
- ဒြပ်စင် 2
- ဒြပ်စင် 4
- ဒြပ်စင် 3
- ဒြပ်စင် 5
- ဒြပ်စင် 1
ငါသည်သင်တို့၏ဒြပ်စင်သီးနှံများကိုပုံမှအကြီးအကျယ်ခြားနား z-index ကိုတန်ဖိုးများကို အသုံးပြု. အကြံပြုပါသည်။ သငျသညျနောက်ပိုင်းတွင်စာမကျြနှာကိုပိုမို element တွေကို add လျှင်လမ်း, သငျသညျအပေါငျးတို့သညျအခွားသောဒြပ်စင်များ၏ z-index ကိုတန်ဖိုးများကိုထိန်းညှိဖို့မလိုဘဲသူတို့ကို layer အားအခန်းတစ်ခန်းရှိသည်။ ဥပမာ:
- ငါ့အထိပ်အများဆုံးဒြပ်စင် 100
- ငါ၏အအလယ်တန်းဒြပ်စင်အဘို့အ 0 င်
- ငါ၏အအောက်ဆုံးဒြပ်စင်အဘို့ -100
သင်တို့သည်လည်းဒြပ်စင်နှစ်မျိုးလုံးအတူတူပဲ z-index ကိုတနျဖိုးကိုပေးနိုင်ပါသည်။ ဤအ element တွေကို stacked နေတယ်ဆိုရင်သူတို့ထိပ်ပေါ်မှာကနောက်ဆုံးဒြပ်စင်နှင့်အတူ, သူတို့က HTML ၌ရေးထားလျက်ရှိ၏အမိန့်ထဲမှာပြသပါလိမ့်မယ်။
တဦးတည်းမှတ်စုထိထိရောက်ရောက် z-index ကိုပစ္စည်းဥစ္စာပိုင်ဆိုင်မှုကိုအသုံးပြုရန် Element တစ်ခုရဲ့အဘို့, တက block level element ဖြစ်ရမည်သို့မဟုတ်သင့် CSS ကိုဖိုင်ထဲမှာ "ပိတ်ပင်တားဆီးမှု" သို့မဟုတ် "inline-ပိတ်ပင်တားဆီးမှု" ၏တစ်ဦး display ကိုအသုံးပြုပါ။
ဂျနီဖာ Krynin ခြင်းဖြင့်မူရင်းဆောင်းပါး။ ဂျယ်ရမီ Girard အားဖြင့် 12/09/16 အပေါ် edited ။