CSS တွင် တည်နေရာချခြင်း၏ အနုတ်တန်ဖိုးများ

ကျွန်ုပ်တို့ လေ့လာခဲ့သော <top>, <right>, <bottom> နှင့် <left> ဂုဏ်သတ္တိများသည် အပြုသဘော တန်ဖိုးများကိုသာမက အနုတ်တန်ဖိုးများကိုလည်း လက်ခံနိုင်ပါသည်။ ဥပမာများဖြင့် ကြည့်ရှုကြပါစို့။

ဥပမာ

အောက်ပါ ဥပမာတွင် အချက်တစ်ခုကို ၎င်း၏မိဘနှင့် ဆက်စပ်၍ အပြည့်အဝ တည်နေရာချထားပြီး အပေါ်မှ <0>, ဘယ်ဘက်မှ <0> အနေအထားတွင် ရှိသည်။

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

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

Результат:

ဥပမာ

ယခု အချက်ကို အပေါ်မှ <-20px>, ဘယ်ဘက်မှ <-30px> အနေအထားသို့ ရွှေ့ကြည့်ပါမည်။

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

css#parent {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 50px auto;
  border: 1px solid red;
}
#child {
  position: absolute;
  top: -20px;
  left: -30px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат: