ရာထူး

ဒြပ်စင်တစ်ခု၏ အနေအထားကို လျင်မြန်စွာ ပြင်ဆင်သတ်မှတ်ရန်အတွက် ဤလက်တိုအသုံးအဆောင်များကို အသုံးပြုပါ။

ဘုံတန်ဖိုးများ

တုံ့ပြန်မှုမရှိသော်လည်း အမြန်နေရာချထားခြင်းအတန်းများကို ရနိုင်ပါသည်။

<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>

ပုံသေထိပ်

မြင်ကွင်းပို့တ်၏ထိပ်တွင်၊ အစွန်းမှအစွန်းသို့ အစိတ်အပိုင်းတစ်ခုကို နေရာချပါ။ သင့်ပရောဂျက်ရှိ ပုံသေအနေအထား၏ အကျိုးသက်ရောက်မှုများကို သင်နားလည်ကြောင်း သေချာပါစေ။ နောက်ထပ် CSS ကို ထပ်ထည့်ဖို့ လိုပါလိမ့်မယ်။

<div class="fixed-top">...</div>

ပုံသေအောက်ခြေ

မြင်ကွင်းပို့တ်၏အောက်ခြေ၊ အစွန်းမှအစွန်းတွင် အစိတ်အပိုင်းတစ်ခုကို နေရာချပါ။ သင့်ပရောဂျက်ရှိ ပုံသေအနေအထား၏ အကျိုးသက်ရောက်မှုများကို သင်နားလည်ကြောင်း သေချာပါစေ။ နောက်ထပ် CSS ကို ထပ်ထည့်ဖို့ လိုပါလိမ့်မယ်။

<div class="fixed-bottom">...</div>

ကပ်စေးနဲ

အစွန်းမှအစွန်းသို့ မြင်ကွင်းပို့တ်၏ထိပ်တွင် အစိတ်အပိုင်းတစ်ခုကို နေရာချပါ၊ သို့သော် သင် ၎င်းကိုကျော်ပြီးမှသာ ရွှေ့ပါ။ utility သည် ဘရောက်ဆာအားလုံးတွင် အပြည့်အဝမပံ့ပိုးနိုင်သော .sticky-topCSS ကိုအသုံးပြုသည် ။position: sticky

IE11 နှင့် IE10 position: stickyသည် position: relative. ထို့ကြောင့်၊ @supportsကျွန်ုပ်တို့သည် စတိုင်များကို မှန်ကန်စွာပြန်ဆိုနိုင်သော ဘရောက်ဆာများသာ ကပ်တွယ်မှုကို ကန့်သတ်ချက်ဖြင့် မေးမြန်းမှုတစ်ခုတွင် ပေါင်းစပ်ထားသည်။

<div class="sticky-top">...</div>