CSS Layout - တည်နေရာ Property
ပိုင်ဆိုင်မှု သည် position
ဒြပ်စင်တစ်ခုအတွက် အသုံးပြုသည့် နေရာချထားမှုနည်းလမ်းအမျိုးအစား (အငြိမ်၊ ဆွေမျိုး၊ ပုံသေ၊ အကြွင်းမဲ့ သို့မဟုတ် ကပ်စေး) ကို သတ်မှတ်သည်။
ရာထူးအိမ်ခြံမြေ၊
ပိုင်ဆိုင်မှု သည် position
ဒြပ်စင်တစ်ခုအတွက် အသုံးပြုသည့် နေရာချထားမှုနည်းလမ်း အမျိုးအစားကို သတ်မှတ်သည်။
ကွဲပြားသော အနေအထားတန်ဖိုး ငါးမျိုးရှိသည်။
static
relative
fixed
absolute
sticky
ထို့နောက် အပေါ်၊ အောက်၊ ဘယ်၊ နှင့် ညာဂုဏ်သတ္တိများကို အသုံးပြု၍ အစိတ်အပိုင်းများကို နေရာချထားပါသည်။ သို့ရာတွင်၊ ပိုင်ဆိုင်မှုကို ဦးစွာသတ်မှတ်မထားပါက ဤဂုဏ်သတ္တိများသည် အလုပ်မဖြစ်ပါ position
။ ရာထူးတန်ဖိုးပေါ် မူတည်ပြီး ကွဲပြားစွာ လုပ်ဆောင်ကြသည်။
အနေအထား: အငြိမ်;
HTML ဒြပ်စင်များကို မူရင်းအတိုင်း static နေရာချထားသည်။
အပေါ်၊ အောက်ခြေ၊ ဘယ်နှင့် ညာဂုဏ်သတ္တိများကြောင့် တည်ငြိမ်သောနေရာချထားသောဒြပ်စင်များကို သက်ရောက်မှုမရှိပါ။
ပါ ၀င်သောဒြပ်စင်အား position: static;
မည်သည့် အထူးနည်းလမ်းဖြင့် နေရာချထားခြင်း မရှိပါ။ စာမျက်နှာ၏ ပုံမှန်စီးဆင်းမှုအတိုင်း အမြဲတမ်း နေရာချထားသည်-
ဤသည်မှာ အသုံးပြုသော CSS ဖြစ်သည် ။
ဥပမာ
div.static {
position: static;
border: 3px solid #73AD21;
}
ရာထူး: ဆွေမျိုး;
ပါ၀င်သည့်အရာတစ်ခုသည် position: relative;
၎င်း၏ပုံမှန်အနေအထားနှင့် ဆက်စပ်အနေအထားရှိသည်။
အတော်အတန်နေရာယူထားသော ဒြပ်စင်တစ်ခု၏ အပေါ်၊ ညာဘက်၊ အောက်ခြေနှင့် ဘယ်ဘက်ဂုဏ်သတ္တိများကို သတ်မှတ်ခြင်းသည် ၎င်းအား ၎င်း၏ပုံမှန်အနေအထားနှင့် ဝေးကွာစေမည်ဖြစ်သည်။ ဒြပ်စင်မှ ကျန်ရှိသော ကွာဟချက်များနှင့် အံဝင်ခွင်ကျဖြစ်စေရန် အခြားအကြောင်းအရာကို ချိန်ညှိမည်မဟုတ်ပါ။
ဤသည်မှာ အသုံးပြုသော CSS ဖြစ်သည် ။
ဥပမာ
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
ရာထူး- ပုံသေ;
ပါ၀င်သည့်ဒြပ်စင်တစ်ခုကို position: fixed;
မြင်ကွင်းပို့တ်နှင့် ဆက်စပ်နေရာချထားသည်၊ ဆိုလိုသည်မှာ စာမျက်နှာကို ရွှေ့ထားသော်လည်း ၎င်းသည် အမြဲတမ်းတစ်နေရာတည်းတွင် ရှိနေသည်။ ဒြပ်စင်ကို နေရာချထားရန် အပေါ်၊ ညာဘက်၊ အောက်ခြေနှင့် ဘယ်ဘက် ဂုဏ်သတ္တိများကို အသုံးပြုထားသည်။
ပုံသေဒြပ်စင်တစ်ခုသည် ပုံမှန်အတိုင်းတည်ရှိနေသည့် စာမျက်နှာတွင် ကွက်လပ်မထားခဲ့ပါ။
စာမျက်နှာ၏ ညာဘက်အောက်ထောင့်ရှိ ပုံသေဒြပ်စင်ကို သတိပြုပါ။ ဤသည်မှာ အသုံးပြုသော CSS ဖြစ်သည် ။
ဥပမာ
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width:
300px;
border: 3px solid #73AD21;
}
position: fixed;
ရာထူး: အကြွင်းမဲ့;
ပါ၀င်သည့်ဒြပ်စင်တစ်ခုအား position: absolute;
အနီးဆုံးနေရာယူထားသည့်ဘိုးဘေးနှင့် ဆက်စပ်နေရာချထားသည် (ပုံသေကဲ့သို့ viewport နှင့် ဆက်စပ်နေမည့်အစား)။
သို့သော်၊ အကြွင်းမဲ့ နေရာချထားသော ဒြပ်စင်တစ်ခုတွင် ဘိုးဘေးဘီဘင်များ မရှိပါက၊ ၎င်းသည် စာရွက်စာတမ်းကိုယ်ထည်ကို အသုံးပြုကာ စာမျက်နှာကို ရွှေ့ခြင်းနှင့်အတူ ရွေ့လျားသည်။
မှတ်ချက်- ပကတိနေရာချထားသော ဒြပ်စင်များကို ပုံမှန်စီးဆင်းမှုမှ ဖယ်ရှားပြီး ဒြပ်စင်များကို ထပ်နေနိုင်သည်။
ဤသည်မှာ ရိုးရှင်းသော ဥပမာတစ်ခုဖြစ်သည်။
ဤသည်မှာ အသုံးပြုသော CSS ဖြစ်သည် ။
ဥပမာ
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
အနေအထား: စေးကပ်သော;
position: sticky;
အသုံးပြုသူ၏ scroll အနေအထားပေါ်အခြေခံ၍ ပါ၀င် သည့်အရာတစ်ခုအား နေရာချထားပါသည်။
စေးကပ်သောဒြပ်စင်သည် ရွေ့လျားမှု အနေအထားပေါ် မူတည်၍ relative
နှင့် , ကြားတွင် ပြောင်းသည်။ fixed
viewport တွင် ပေးထားသော offset အနေအထားကို မတွေ့မချင်း ၎င်းအား ဆွေမျိုးအနေအထားတွင် နေရာချထားသည် - ထို့နောက် ၎င်းသည် နေရာတွင် "ကပ်" (အနေအထား- ပုံသေကဲ့သို့)။
မှတ်ချက်- Internet Explorer သည် sticky positioning ကို မပံ့ပိုးပါ။ Safari တွင် -webkit- ရှေ့ဆိက်တစ်ခု လိုအပ်သည် (အောက်ပါ ဥပမာကိုကြည့်ပါ)။ အလုပ်လုပ်ရန် ကပ်စေးနဲသော နေရာချထားခြင်းအတွက် top
, right
, bottom
သို့မဟုတ် အနည်းဆုံးတစ်ခုကိုလည်း သတ်မှတ်ရပါမည် ။left
top: 0
ဤဥပမာတွင်၊ သင်သည် ၎င်း၏ scroll အနေအထားသို့ရောက်ရှိသောအခါ စာမျက်နှာ၏ထိပ်တွင် ကပ်နေသောဒြပ်စင် ဖြစ်သည်။
ဥပမာ
div.sticky {
position: -webkit-sticky; /* Safari */
position:
sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
ပုံတစ်ခုတွင် စာသားနေရာချထားခြင်း။
ပုံတစ်ပုံပေါ်တွင် စာသားကို မည်ကဲ့သို့ နေရာချရမည်နည်း။
ဥပမာ
ကိုယ်တိုင်စမ်းကြည့်ပါ-
နောက်ထပ် ဥပမာများ
This example demonstrates how to set the shape of an element. The element is clipped into this shape, and displayed.
All CSS Positioning Properties
Property | Description |
---|---|
bottom | Sets the bottom margin edge for a positioned box |
clip | Clips an absolutely positioned element |
left | Sets the left margin edge for a positioned box |
position | Specifies the type of positioning for an element |
right | Sets the right margin edge for a positioned box |
top | Sets the top margin edge for a positioned box |