top property

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

ဝါကျဖွဲ့စည်းပုံ

selector {
	top: size or auto;
}

ဥပမာ

ကလေး element အပေါ် မျက်နှာပြင်တင် လိုက်သောအခါတွင် ထို 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;
	margin-left: 50px;
}
p:hover {
	top: 25px;
	width: 100px;
	height: 100px;
	border: 1px solid red;
}

ဥပမာ

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

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

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

ဤအကြောင်းအရာများကိုလည်း ကြည့်ပါ

bottom property,
သည် element ၏ အောက်ဆုံးအစွန်း အနေအထားကို သတ်မှတ်ပေးသည်
left property,
သည် element ၏ ဘယ်ဘက်အစွန်း အနေအထားကို သတ်မှတ်ပေးသည်
right property,
သည် element ၏ ညာဘက်အစွန်း အနေအထားကို သတ်မှတ်ပေးသည်
pseudoelement ::backdrop,
သည် ပထမ element ၏ နောက်တွင် အနေအထားကို သတ်မှတ်ပေးသည်
caption-side property,
သည် ဇယား ခေါင်းစဉ်၏ အနေအထားကို သတ်မှတ်ပေးသည်