CSS ကိုနေရာချထားရုံ X, Y Coordinates ထက်ပိုဖြစ်ပါတယ်
CSS ကို positioning ကိုရှည်လျားက်ဘ်ဆိုက်အပြင်အဆင်အတွက်အရေးပါသောအစိတ်အပိုင်းတစ်ခုဖြစ်ခဲ့သည်။ တောင်မှ Flexbox နဲ့ CSS Grid တူသောအသစ်များ CSS ကိုအဆင်အပြင်နည်းစနစ်များမြင့်တက်အတူ positioning ကိုနေတုန်းပဲလှည့်ကွက်မဆိုက်ဘ်ဒီဇိုင်နာရဲ့လွယ်အိတ်ထဲမှာအရေးပါတဲ့နေရာအရပ်ရှိပါတယ်။
CSS ကို positioning ကိုအသုံးပြုတဲ့အခါ, သင်လုပ်ဖို့လိုအပ်ပါလိမ့်မည်ကိုပထမဦးဆုံးအရာကိုသင်ပေးထားသောဒြပ်စင်အဘို့အအကြွင်းမဲ့အာဏာသို့မဟုတ်ဆွေမျိုး positioning ကိုသုံးစွဲဖို့သွားနေလျှင်ဘရောက်ဇာကိုပြောပြရန်အနေအထားများအတွက် CSS ကိုပိုင်ဆိုင်မှုတည်ထောင်ရန်ဖြစ်ပါတယ်။ သင်တို့သည်လည်းရှင်းရှင်းလင်းလင်းအဲဒီနှစျခု positioning ကိုဂုဏ်သတ္တိများအကြားခြားနားချက်ကိုနားလည်သဘောပေါက်ဖို့လိုအပ်ပါတယ်။
အကြွင်းမဲ့အာဏာနှင့်ဆွေမျိုးအများဆုံးမကြာခဏက်ဘ်ဆိုက်ဒီဇိုင်းအတွက်အသုံးပြုနှစ်ခု CSS ကိုအနေအထားကိုဂုဏ်သတ္တိများရှိပါတယ်နေစဉ်, လေးပြည်နယ်များအနေအထားကိုအိမ်ခြံမြေမှတကယ်ရှိပါတယ်:
- အငြိမ်
- အကြွင်းမဲ့အာဏာ
- ဆွေမျိုး
- သတ်မှတ်ထားတဲ့
static ဝဘ်စာမျက်နှာပေါ်တွင်မဆိုဒြပ်စင်အဘို့ကို default အနေအထားကိုဖြစ်ပါတယ်။ သငျသညျ Element တစ်ခုရဲ့အနေအထားသတ်မှတ်မထားဘူးဆိုရင်, ကငြိမ်ကြလိမ့်မည်။ ဤသည်က၌တည်ရှိ၏ဘယ်မှာပေါ်အခြေခံပြီး screen ပေါ်မှာပြသမည်ဟုဆိုလိုသည် က HTML document ကို ဘယ်လိုအတွင်းပိုင်းဖော်ပြရန်မယ်လို့ ပုံမှန်စီးဆင်းမှု ကြောင့်စာရွက်စာတမ်း၏။
သငျသညျအငြိမ်အနေအထားရှိကြောင်း Element တစ်ခုရဲ့ထိပ်တန်းသို့မဟုတ် left တူသော positioning ကိုစည်းမျဉ်းစည်းကမ်းတွေကိုလျှောက်ထားပါလျှင်ထိုစည်းမျဉ်းစည်းကမ်းတွေကိုလျစ်လျူရှုမည်ဖြစ်ပြီးကြောင့်သာမန်စာရွက်စာတမ်းစီးဆင်းမှုထဲမှာပေါ်လာလိမ့်မယ်ရှိရာဒြပ်စင်ရှိနေပါဦးမည်။ သောက default value ကိုတစ်ခုဖြစ်သည်ကတည်းကအမှန်တရားမှာ, သင်ခဲ, အစဉ်အဆက်နေလျှင်, CSS ကိုတစ်ဦးအငြိမ်အနေအထားမှ Element တစ်ခုရဲ့သတ်မှတ်ထားရန်လိုအပ်လိမ့်မယ်။
အကြွင်းမဲ့အာဏာ CSS ကိုနေရာချထားခြင်း
absolute positioning ဖြစ်ကောင်းနားလည်ရန်အလွယ်ကူဆုံး CSS ကိုအနေအထားဖြစ်ပါတယ်။ သင်ဤ CSS ကိုအနေအထားကိုပိုင်ဆိုင်မှုနှင့်အတူစတင်:
အနေအထား: အကြွင်းမဲ့အာဏာ;ဤသည်မှာတန်ဖိုးကိုသမျှ positioned ခံရဖို့သွားသောဘရောက်ဇာကိုစာရွက်စာတမ်း၏ပုံမှန်စီးဆင်းမှုကနေဖယ်ရှားခြင်းနှင့်အစားစာမကျြနှာတခုတခုအပေါ်မှာအတိအကျတည်နေရာထဲတွင်နေရာရပါမည်ပြောထားသည်။ ဒီအကြောင်းဒြပ်စင်ရဲ့အရင်းနှီးဆုံး Non-staticly positioned ဘိုးဘွားအပေါ်အခြေခံပြီးတွက်ချက်သည်။
တစ်ဦးလုံးဝ positioned element ကစာရွက်စာတမ်း၏ပုံမှန်စီးဆင်းမှုထဲကယူသောကြောင့်, က HTML မှာရှေ့မှာဒါမှမဟုတ်ပြီးနောက်ဒြပ်စင်ဝဘ်စာမျက်နှာပေါ်တွင်နေရာယူထားကြသည်ကိုဘယ်လိုအကျိုးသက်ရောက်စေမည်မဟုတ်။
ဥပမာတစ်ခုအဖြစ် - သင်ဆွေမျိုးများ၏တန်ဖိုးသုံးပြီး positioned ခဲ့ကွောငျးကှဲပွားခဲ့လျှင် (ကြှနျုပျတို့မကြာမီဒီတန်ဖိုးကိုမှာကြည့်ရှုမည်), နှင့်ဌာနခွဲအတွင်း၌သင်ဌာနခွဲရဲ့ထိပ်ကနေ 50 pixels ကိုနေရာချစေချင်ကြောင်းတစ်အပိုဒ်ခဲ့, သင် ဤကဲ့သို့သော, ကို "ထိပ်တန်း" property ကအပေါ် 50px တစ်ခု offset တန်ဖိုးကိုနှင့်အတူကြောင်းအပိုဒ်ဖို့ "အကြွင်းမဲ့အာဏာ" ၏တစ်ဦးအနေအထားတန်ဖိုးကို add လိမ့်မယ်။
အနေအထား: အကြွင်းမဲ့အာဏာ; ထိပ်တန်း: 50px;ဒါကလုံးဝ positioned ဒြပ်စင်ပြီးတော့အမြဲကြောင်းအတော်လေး positioned ဌာနခွဲရဲ့ထိပ်ကနေ 50 pixels ကိုဖော်ပြရန်မယ်လို့ - နေပါစေပုံမှန်စီးဆင်းမှုအတွက်အဲဒီမှာဖော်ပြပေးအခြားဘယ်အရာကို။ သင်၏ "လုံးဝ" positioned element ကယင်း၏အခြေအနေတွင်အဖြစ်အတော်လေး positioned တဦးတည်းကိုသုံးခြင်းနှင့်သင်အသုံးပြုအပြုသဘောတန်ဖိုးကိုကြောင်းကိုဆွေမျိုးဖြစ်ပါတယ်။
သင်အသုံးပြုမရရှိနိုင်ရှိသည်သောလေး positioning ကိုဂုဏ်သတ္တိများရှိပါသည်:
- ထိပ်တန်း
- မှန်သော
- အောကျခွေ
- လက်ဝဲ
သငျသညျ (က Element ကဤတန်ဖိုးများကိုနှစ်ခုစလုံးသည်နှင့်အညီ positioned မရနိုင်ကတည်းက) ထိပ်ပိုင်းသို့မဟုတ်အောက်ခြေဖြစ်စေသုံးပါနှင့်ညာဘက်သို့မဟုတ် left ဖြစ်စေနိုင်ပါတယ်။
Element တစ်ခုရဲ့အကြွင်းမဲ့အာဏာတစ်ဦးအနေအထားမှသတ်မှတ်ထားပေမယ့်အဲဒီမှာမ Non-staticly positioned ဘိုးဘေးတို့ဖြစ်ပါတယ်လျှင်, သူကစာမျက်နှာ၏အမြင့်ဆုံး level element ဖြစ်ပါတယ်ထားတဲ့ခန္ဓာကိုယ်ဒြပ်စင်မှဆွေမျိုး positioned လိမ့်မည်။
ဆွေမျိုးနေရာချထားခြင်း
ကျနော်တို့ပြီးသားဆွေမျိုး positioning ကိုဖော်ပြခဲ့တဲ့ဒါရဲ့ယခုကြောင်းအိမ်ခြံမြေကိုကြည့်ကြကုန်အံ့။
ဆွေမျိုး positioning ကို absolute positioning ကိုကဲ့သို့တူညီသောလေး positioning ကိုဂုဏ်သတ္တိများကိုအသုံးပြုသည်, ဒါပေမယ့်အစား၎င်း၏အရင်းနှီးဆုံး Non-staticly positioned ဘိုးဘွားပေါ်မှာဒြပ်စင်များ၏အနေအထားအခွခေံ၏, အဲဒါကိုပုံမှန်စီးဆင်းမှုဆဲဖြစ်လျှင်၎င်းဒြပ်စင်ဘယ်မှာရှိလိမ့်မည်ထံမှစတင်သည်။
သင်သည်သင်၏ဝဘ်စာမျက်နှာပေါ်သုံးအပိုဒ်ရှိသည်, တတိယတစ်ဦး "အနေအထား: ဆွေမျိုး" ရှိပါတယ်လျှင်ဥပမာ, ပေါ်တင်လိုက်တယ်စတိုင်တစ်ခုကိုအနေအထားကလက်ရှိတည်နေရာရဲ့အပေါ်အခြေခံပြီး offset ပါလိမ့်မည်ဖြစ်ပါတယ်။
။ ။အပိုဒ် 1
အပိုဒ် 2
အပိုဒျ 3 ။
အထက်ပါဥပမာမှာ, တတိယအပိုဒ်ကွန်တိန်နာဒြပ်စင်၏ဘယ်ဖက်ခြမ်းကနေ 2em positioned ပါလိမ့်မည်, သို့သော်ပထမဦးဆုံးစာပိုဒ်နှစ်ခုအောက်တွင်ဖော်ပြထားသောဖြစ်လိမ့်မည်။ ဒါဟာစာရွက်စာတမ်း၏ပုံမှန်စီးဆင်းမှုအတွက်ဆက်လက်ရှိနေမည်ဖြစ်ကြောင်းနှင့်ပဲအနည်းငယ်ထေရလိမ့်မည်။ သငျသညျအနေအထားကပြောင်းလဲသွားလျှင်: အကြွင်းမဲ့အာဏာ; ကမရှိတော့စာရွက်စာတမ်း၏ပုံမှန်စီးဆင်းမှုအတွက်ဖြစ်လိမ့်မယ်ဘာဖြစ်လို့လဲဆိုတော့သူက, က၏ထိပ်ပေါ်မှာပြသမယ်လို့အောက်ပါဘာမှ။
ဒါဟာပုံမှန်စီးဆင်းမှုထဲမှာပေါ်လာလိမ့်မယ်အတိအကျဘယ်မှာဒြပ်စင်ဖြစ်နေဆဲဆိုလိုတာကတည်ထောင်မျှမထေတန်ဖိုးဆွေမျိုး: ဝဘ်စာမျက်နှာပေါ်တွင် element တွေကိုမကြာခဏအနေအထားတစ်ခုတန်ဖိုးကိုတင်ထားရန်အသုံးပြုကြသည်။ ဤသည်အခြားဒြပ်စင်လုံးဝ positioned နိုင်သည့်ဆန့်ကျင်နေတဲ့အခြေအနေတွင်အဖြစ်ဒြပ်စင်တည်ထောင်ရန်တစ်ခုတည်းကိုသာပြုမိသည်။ သငျသညျ (web design မှာအလွန်ဘုံဇာတ်လမ်းဖြစ်သော) "ကွန်တိန်နာ" ၏တစ်ဦးလူတန်းစားတန်ဖိုးသင့်ရဲ့ Website တစ်ခုလုံးကိုပတျဝနျးကငျြကှဲပွားရှိပါကကအထဲမှာဘာမှကိုသုံးနိုင်သည်နိုင်အောင်ဥပမာ,, အဲဒီဌာနခွဲဆွေမျိုးတစ်ဦးအနေအထားဟုသတ်မှတ်နိုင်ပါသည် တစ်ဦး positioning ကိုအခြေအနေတွင်အဖြစ်က။
အဘယ်အရာကို Fixed Positioning အကြောင်း?
Fixed positioning ကိုအများကြီး absolute positioning ကိုကဲ့သို့ဖြစ်၏။ ၎င်းဒြပ်စင်၏အနေအထားဟာအကြွင်းမဲ့အာဏာမော်ဒယ်ကဲ့သို့တူညီသောလမ်းအတွက်တွက်ချက်တာဖြစ်ပါတယ်, ဒါပေမယ့် fixed ဒြပ်စင်ပြီးတော့နီးပါးတစ်ဦးနှင့်တူသည်ဟု location- အတွက် fixed နေကြသည် ရေစာ ။ စာမကျြနှာပျေါမှာအရာအားလုံးကိုထိုဒြပ်စင်အတိတ် scroll ပါလိမ့်မယ်။
ဒီပစ္စည်းဥစ္စာပိုင်ဆိုင်မှုတန်ဖိုးကိုသုံးစွဲဖို့, သင်သတ်မှတ်ပါလိမ့်မယ်:
အနေအထား: fixed;သင်သည်သင်၏ site ပေါ်တွင်အရပျ၌က Element fix တဲ့အခါမှာသင့်ရဲ့ web page ကိုထုတ်ပုံနှိပ်သောအခါထိုသို့တည်နေရာအတွက် print ထုတ်ပါလိမ့်မယ်, စိတ်ကိုထားပါ။ သင့်ရဲ့ဒြပ်စင်သင့်စာမျက်နှာ၏ထိပ်မှာ fixed လျှင်ဥပမာ, သည်ပုံနှိပ်စာမျက်နှာ၏ထိပ်မှာပေါ်လာပါလိမ့်မယ် - ကစာမျက်နှာ၏ထိပ်မှ fixed ရဲ့လို့ပဲ။ သင်ကဘယ်လိုပြောင်းလဲပစ်ရန်မီဒီယာအမျိုးအစားများကိုသုံးနိုင်သည် ပုံနှိပ်စာမျက်နှာများကို ပုံသေဒြပ်စင်ဖော်ပြရန်:
@media မျက်နှာပြင် {h1 # ပထမဦးဆုံး {အနေအထား: fixed; }} @media ပုံနှိပ် {h1 # ပထမဦးဆုံး {အနေအထား: ငြိမ်; }}ဂျနီဖာ Krynin ခြင်းဖြင့်မူရင်းဆောင်းပါး။ 1/7/16 အပေါ်ဂျယ်ရမီ Girard တည်းဖြတ်။