CSS တွင် အချက်များကို အပြည့်အဝ နေရာချခြင်း

ဤသင်ခန်းစာတွင် အချက်များကို အပြည့်အဝ နေရာချခြင်းကို ခွဲခြမ်းစိတ်ဖြာပါမည်။ ၎င်းသည် စာမျက်နှာ၏ သတ်မှတ်ထားသော ကိုဩဒိနိတ်များအလိုက် အချက်များကို နေရာချရန် ခွင့်ပြုသည်။ ဥပမာအားဖြင့်၊ အချက်တစ်ခုကို စာမျက်နှာ၏ ထိပ်မှ 100px နှင့် ဘယ်ဘက်မှ 200px တွင် နေရာချနိုင်သည်။ အချက်သည် အခြားအချက်များ ရှိနေသည်ဖြစ်စေ ထိုနေရာသို့ ရွေ့လျားသွားပြီး ၎င်းတို့ပေါ်တွင် တင်လိုက်မည်။ ဤသို့ပြုလုပ်သည့်အခါ အချက်သည် စာတမ်း၏ ပုံမှန်စီးဆင်းမှု မှ ထွက်ကျန်ရစ်သည်ဟု ဆိုသည်- အခြားအချက်အားလုံးသည် ကျွန်ုပ်တို့၏ အချက်မရှိသကဲ့သို့ ပြုမူကြမည်။

အချက်တစ်ခုကို အပြည့်အဝ နေရာချထားသည့် အနေအထားသို့ ပြောင်းလဲရန်၊ ထိုအချက်အား position ဂုဏ်သတ္တိအား absolute တန်ဖိုးဖြင့် သတ်မှတ်ပေးရန် လိုအပ်သည်။ ဤဂုဏ်သတ္တိအပြင်၊ နောက်ထပ် နှစ်ခု လိုအပ်သည်- တစ်ခုသည် ဒေါင်လိုက် ကိုဩဒိနိတ်ကို သတ်မှတ်ပေးပြီး ဒုတိယတစ်ခုသည် - အလျားလိုက် ကိုဩဒိနိတ်ကို သတ်မှတ်ပေးသည်။

ဒေါင်လိုက်အတွက် အပေါ်မှ အကွာအဝေး၊ သို့မဟုတ် အောက်မှ အကွာအဝေး သတ်မှတ်ပေးရန် လိုအပ်သည်။ အပေါ်မှ အကွာအဝေးကို top ဂုဏ်သတ္တိဖြင့် သတ်မှတ်ပြီး၊ အောက်မှ အကွာအဝေးကို - bottom ဂုဏ်သတ္တိဖြင့် သတ်မှတ်သည်။ အလျားလိုက်အတွက် ဘယ်ဘက်မှ အကွာအဝေး၊ သို့မဟုတ် ညာဘက်မှ အကွာအဝေး သတ်မှတ်ပေးရန် လိုအပ်သည်။ ဘယ်ဘက်မှ အကွာအဝေးကို left ဂုဏ်သတ္တိဖြင့် သတ်မှတ်ပြီး၊ ညာဘက်မှ အကွာအဝေးကို - right ဂုဏ်သတ္တိဖြင့် သတ်မှတ်သည်။

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

ဥပမာ

အစပိုင်းတွင် နေရာမချဘဲ ဘလောက်နှစ်ခု ပြုလုပ်ကြည့်ရအောင် (အချက်များသည် ၀င်းဒိုး၏ အစွန်းသို့ မကပ်ထားကြောင်း သတိပြုပါ၊ အဘယ်ကြောင့်ဆိုသော် body တွင် ပုံသေ margin ရှိသောကြောင့်):

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
#elem2 {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

ဥပမာ

ယခု အစိမ်းရောင် ဘလောက်ကို အပြည့်အဝ နေရာချခြင်း သတ်မှတ်ပြီး၊ ထိပ်မှ 150px နှင့် ဘယ်ဘက်မှ 100px တွင် ထားရအောင်:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
#elem2 {
  position: absolute;
  top: 150px;
  left: 100px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

ဥပမာ

ယခု အစိမ်းရောင် ဘလောက်ကို ထိပ်မှ 0px နှင့် ဘယ်ဘက်မှ 0px တွင် ထားရအောင်:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
#elem2 {
  position: absolute;
  top: 0px;
  left: 0px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

ဥပမာ

ယခု အစိမ်းရောင် ဘလောက်ကို ထိပ်မှ 0px နှင့် ညာဘက်မှ 0px တွင် ထားရအောင်:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
#elem2 {
  position: absolute;
  top: 0;
  right: 0;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

ဥပမာ

ယခု အစိမ်းရောင် ဘလောက်ကို အောက်မှ 0px နှင့် ညာဘက်မှ 0px တွင် ထားရအောင်:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
#elem2 {
  position: absolute;
  bottom: 0;
  right: 0;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

ဥပမာ

ယခု အစိမ်းရောင် ဘလောက်ကို အောက်မှ 0px နှင့် ဘယ်ဘက်မှ 0px တွင် ထားရအောင်:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
#elem2 {
  position: absolute;
  bottom: 0;
  left: 0;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

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