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

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

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

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

ဥပမာ

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

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

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

Результат:

ဥပမာ

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

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

css#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 သတ်မှတ်ပါမည်။ ဤ အခြေအနေတွင် သားစဉ်မြေးဆက်သည် ၎င်း၏ မိဘနှင့်နှိုင်းယှဉ်၍ အနေအထားသတ်မှတ်မည်ဖြစ်သည်။

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

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