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ဂုဏ်သတ္တိ,
အရာသည် ဇယား၏ခေါင်းစဉ်၏တည်နေရာကိုသတ်မှတ်ပေးသည်