CSS တွင် လုံးဝမိဘအပေါ် အနေအထားသတ်မှတ်ခြင်း

ယခင်သင်ခန်းစာတွင် မိဘ element အား relative ပေးထားပါက ၎င်း၏ သားသမီး element များသည် ၎င်းနှင့်ပတ်သက်၍ လုံးဝအနေအထား သတ်မှတ်မည်ဖြစ်ကြောင်း ကျွန်ုပ်တို့ ခွဲခြမ်းစိတ်ဖြာခဲ့ပါသည်။ မိဘ element သည် ပုံမှန် စီးဆင်းမှုမှ ထွက်မသွားစေလိုသည့်အခါ ဤနည်းကို မကြာခဏ အသုံးပြုလေ့ရှိပါသည်။

မိဘ element တွင် absolute သတ်မှတ်ထားသည့် အခြေအနေလည်း ရှိနိုင်ပါသည်။ ထိုကိစ္စတွင် absolute ရှိသော သားသမီး element များသည်လည်း ဘရောက်ဇာဝင်းဒိုးနှင့်ပတ်သက်၍ မဟုတ်ဘဲ ထိုသို့သော မိဘ element နှင့်ပတ်သက်၍ အနေအထား သတ်မှတ်မည်ဖြစ်သည်။

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

#parent {
	position: absolute;
	top: 100px;
	left: 200px;
	
	width: 500px;
	height: 300px;
	border: 1px solid red;
}
#child {
	position: absolute;
	top: 0;
	left: 0;
	
	width: 200px;
	height: 200px;
	border: 1px solid green;
}

400px အရွယ်အစားရှိ လုံးဝအနေအထား သတ်မှတ်ထားသော စတုရန်းဘလောက်တစ်ခုကို ပြုလုပ်ပါ။ ၎င်းအတွင်းတွင် 50px အရွယ်အစားရှိ နောက်ထပ်ဘလောက်နှစ်ခုကို ပြုလုပ်ပါ။ ပထမဘလောက်ကို မိဘ element ၏ ညာဘက်အပေါ်ထောင့်တွင် ထားရှိပါ၊ ဒုတိယဘလောက်ကို ဘယ်ဘက်အောက်ထောင့်တွင် ထားရှိပါ။