CSS တွင် တည်နေရာချခြင်း၏ အနုတ်တန်ဖိုးများ

ကျွန်ုပ်တို့ လေ့လာခဲ့သော <top>, <right>, <bottom> နှင့် <left> ဂုဏ်သတ္တိများသည် အပြုသဘော တန်ဖိုးများကိုသာမက အနုတ်တန်ဖိုးများကိုလည်း လက်ခံနိုင်ပါသည်။ ဥပမာများဖြင့် ကြည့်ရှုကြပါစို့။

ဥပမာ

အောက်ပါ ဥပမာတွင် အချက်တစ်ခုကို ၎င်း၏မိဘနှင့် ဆက်စပ်၍ အပြည့်အဝ တည်နေရာချထားပြီး အပေါ်မှ <0>, ဘယ်ဘက်မှ <0> အနေအထားတွင် ရှိသည်။

<div id="parent">
	<div id="child"></div>
</div>

#parent {
	position: relative;
	width: 300px;
	height: 300px;
	margin: 50px auto;
	border: 1px solid red;
}
#child {
	position: absolute;
	top: 0;
	left: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

ဥပမာ

ယခု အချက်ကို အပေါ်မှ <-20px>, ဘယ်ဘက်မှ <-30px> အနေအထားသို့ ရွှေ့ကြည့်ပါမည်။

<div id="parent">
	<div id="child"></div>
</div>

#parent {
	position: relative;
	width: 300px;
	height: 300px;
	margin: 50px auto;
	border: 1px solid red;
}
#child {
	position: absolute;
	top: -20px;
	left: -30px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

အောက်ပါ နမူနာတွင် အစိမ်းရောင် ဘလောက်သည် <margin> ကိုသုံး၍ ဖန်သားပြင်အလယ်တွင် ရှိနေပြီး အနီရောင် ဘလောက်များကို ၎င်းနှင့် ဆက်စပ်၍ တည်နေရာချထားသည်။ ပေးထားသော နမူနာအတိုင်း စာမျက်နှာကို ပြန်လည်ဖန်တီးပါ။