CSS တွင် မိဘအား အနေအထားသတ်မှတ်ခြင်း

အကယ်၍ element တစ်ခုကို relative သတ်မှတ်ထားပြီး ၎င်း၏ သားစဉ်မြေးဆက်ကို absolute သတ်မှတ်ထားလျှင်၊ ထို သားစဉ်မြေးဆက်သည် ဘရောက်ဆာဝင်းဒိုးနှင့် နှိုင်းယှဉ်၍မဟုတ်ဘဲ ၎င်း၏ မိဘနှင့် နှိုင်းယှဉ်၍ အနေအထားသတ်မှတ်မည်ဖြစ်သည်။

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

ဥပမာများကို ကြည့်ရအောင်။

ဥပမာ

အစပိုင်းတွင် အနေအထားမသတ်မှတ်ဘဲ မိဘဘလောက်နှင့် သားစဉ်မြေးဆက်ဘလောက်တစ်ခုကို ပြုလုပ်ကြည့်ပါမည်။

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

#parent {
	width: 500px;
	height: 300px;
	margin: 0 auto;
	border: 1px solid red;
}
#child {
	width: 200px;
	height: 200px;
	border: 1px solid green;
}

ဥပမာ

ယခု အစိမ်းရောင်ဘလောက်ကို အတည်အနေအထားသတ်မှတ်ကြည့်ပါမည်။ မိဘကို relative မသတ်မှတ်ထားသောကြောင့်၊ သားစဉ်မြေးဆက်သည် ဘရောက်ဆာဝင်းဒိုးနှင့် နှိုင်းယှဉ်၍ အနေအထားသတ်မှတ်မည်ဖြစ်သည်။

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

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

ဥပမာ

ယခု မိဘကို relative သတ်မှတ်ပါမည်။ ဤ အခြေအနေတွင် သားစဉ်မြေးဆက်သည် ၎င်း၏ မိဘနှင့်နှိုင်းယှဉ်၍ အနေအထားသတ်မှတ်မည်ဖြစ်သည်။

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

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

လက်တွေ့လေ့ကျင့်ခန်းများ

အောက်ပါလေ့ကျင့်ခန်းများတွင် အဓိကဘလောက်ကို auto တန်ဖိုးရှိသော margin ကို အသုံးပြု၍ ဗဟိုချက်တွင်ထားပြီး၊ ကျန်အရာများကို ၎င်းနှင့်နှိုင်းယှဉ်၍ အနေအထားသတ်မှတ်ရန် position property ကို အသုံးပြုထားသည်။