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 ကို အသုံးပြုထားသည်။