CSS တွင် အခြားနည်းဖြင့် အနေအထားသတ်မှတ်ခြင်း

အခြားနည်းဖြင့် အနေအထားသတ်မှတ်ခြင်းကို position property အတွက် relative တန်ဖိုးဖြင့် သတ်မှတ်ပေးပါသည်။ ဤကဲ့သို့ အနေအထားသတ်မှတ်ခြင်းသည် element များကို ၎င်းတို့၏ လက်ရှိတည်နေရာမှ သတ်မှတ်ထားသော အကွာအဝေးဖြင့် ရွှေ့ပေးနိုင်စေပါသည်။ ဤသို့ပြုလုပ်ခြင်းဖြင့် စာမျက်နှာရှိ အခြား element အားလုံးက element သည် ၎င်း၏ မူလတည်နေရာတွင်ပင် ရှိနေသည်ဟု ထင်မြင်ယူဆကြပါသည်။ ဆိုလိုသည်မှာ ဤကဲ့သို့ အနေအထားသတ်မှတ်မှုအမျိုးအစားတွင် element သည် သာမန် စီးဆင်းမှု (normal flow) မှ ထွက်မသွားပါ။

လက်ရှိတည်နေရာမှ ရွှေ့ခြင်းကို top, right, bottom နှင့် left properties များဖြင့် သတ်မှတ်ပေးပါသည်။

ဥပမာ

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

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

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

Результат:

ဥပမာ

ယခု ပထမဘလောက်ကို relative ထည့်ကြည့်ပါမည်။ ကျွန်ုပ်တို့က ရွှေ့ခြင်းကို မသတ်မှတ်သေးသဖြင့် မည်သည့်အရာမှ ပြောင်းလဲမသွားပါ။

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

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

Результат:

ဥပမာ

ယခု ကျွန်ုပ်တို့၏ ဘလောက်ကို အပေါ်မှ 30px အကွာအဝေးသို့ top property သတ်မှတ်ပေးကာ ရွှေ့ကြည့်ပါမည်။ ဤသို့ပြုလုပ်ခြင်းဖြင့် အခြား element အားလုံးက ကျွန်ုပ်တို့၏ ဘလောက်သည် မူလတည်နေရာတွင်ပင် ရှိနေသည်ဟု ပြုမူကြပါလိမ့်မည်။

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

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

Результат:

ဥပမာ

ယခု ကျွန်ုပ်တို့၏ ဘလောက်ကို ဘယ်ဘက်မှ 40px အကွာအဝေးသို့ left property သတ်မှတ်ပေးကာ ရွှေ့ကြည့်ပါမည်။

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

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

Результат:

ဥပမာ

top, right, bottom နှင့် left properties များ၏ အနှုတ်တန်ဖိုးများသည် ဆန့်ကျင်ဘက်ဦးတည်ချက်သို့ ရွှေ့ပေးပါသည်။ ဥပမာ၊ top ၏ အပေါင်းတန်ဖိုးသည် အောက်သို့ရွှေ့ပြီး အနှုတ်တန်ဖိုးသည် အပေါ်သို့ရွှေ့ပါသည်။

ယခု ကျွန်ုပ်တို့၏ ဒုတိယဘလောက်ကို အပေါ်သို့ 40px ရွှေ့ရန် top property တွင် အနှုတ်တန်ဖိုးသတ်မှတ်ပေးကြည့်ပါမည်။

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

css#elem1 {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  position: relative;
  top: -40px;
  left: 20px;
  
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

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

html<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
စာသား စာသား စာသား

css#elem1 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #FF8888;
}
#elem2 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #7E89EB;
}
#elem3 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #4DEE99;
}