bottom ဂုဏ်သတ္တိ

bottom ဂုဏ်သတ္တိသည် element ၏အောက်ဆုံးအစွန်း၏တည်နေရာကိုသတ်မှတ်ပေးသည်။ ဂုဏ်သတ္တိအတွက်တန်ဖိုးများကိုယေဘုယျအသိအမှတ်ပြုအတိုင်းအတာယူနစ်များ၊ ဥပမာ- ပစ်ဆယ်များ၊ လက်မများ၊ ပွိုင့်များ၊ ရာခိုင်နှုန်းများဖြင့်ရေးသားနိုင်သည်။ သတ်မှတ်ထားသောတန်ဖိုးများသည်အနှုတ်ကိန်းများလည်းဖြစ်နိုင်ပြီး၊ ထိုသို့ဆိုလျှင် element များသည်တစ်ခုပေါ်တစ်ခုထပ်နေလိမ့်မည်။ ကိုဩဒိနိတ်များရေတွက်မှုကို position ဂုဏ်သတ္တိကဆုံးဖြတ်ပေးသည်၊ ၎င်းသည်ပုံမှန်အားဖြင့် relative (အနေအထားဆိုင်ရာ) သို့မဟုတ် absolute (အနေအထားအပြည့်အစုံ) တန်ဖိုးများကိုယူသည်။

သဒ္ဒါဖွဲ့စည်းပုံ

selector {
	bottom: auto သို့မဟုတ် တိုင်းတာမှုယူနစ်ပါသောကိန်း;
}

နမူနာ

Child element အပေါ်မှာတင်ထားသောအခါ ၎င်း၏အောက်ဆုံးနယ်နမ်တည်နေရာကို 25px နှင့်ညီအောင်သတ်မှတ်ကြပါစို့။

<div id="elem">
	<p></p>
</div>

#elem {
	width: 400px;
	height: 300px;
	border: 1px solid black;
}
p {
	position: relative;
	width: 100px;
	height: 100px;
	border: 1px solid red;
	margin-top: 50px;
}
p:hover {
	bottom: 25px;
	width: 100px;
	height: 100px;
	border: 1px solid red;
}

နမူနာ

ယခု child element ၏အောက်ဆုံးနယ်နမ်သည် တင်ထားသောအခါ -50px တွင်တည်ရှိပါစေ။

<div id="elem">
	<p></p>
</div>

#elem {
	width: 400px;
	height: 300px;
	border: 1px solid black;
}
p {
	position: relative;
	width: 100px;
	height: 100px;
	border: 1px solid red;
	margin-top: 50px;
}
p:hover {
	bottom: -50px;
	width: 100px;
	height: 100px;
	border: 1px solid red;
}

ဆက်လက်လေ့လာရန်

top ဂုဏ်သတ္တိ,
အရာသည် element ၏ထိပ်ဆုံးအစွန်း၏တည်နေရာကိုသတ်မှတ်ပေးသည်
left ဂုဏ်သတ္တိ,
အရာသည် element ၏ဘယ်ဘက်အစွန်း၏တည်နေရာကိုသတ်မှတ်ပေးသည်
right ဂုဏ်သတ္တိ,
အရာသည် element ၏ညာဘက်အစွန်း၏တည်နေရာကိုသတ်မှတ်ပေးသည်
::backdrop ပီယူဒိုအဲလ်လီမင့်,
အရာသည်ပထမ element ပြီးနောက်တည်နေရာကိုသတ်မှတ်ပေးသည်
caption-side ဂုဏ်သတ္တိ,
အရာသည် ဇယား၏ခေါင်းစဉ်၏တည်နေရာကိုသတ်မှတ်ပေးသည်