position ဂုဏ်သတ္တိ

position ဂုဏ်သတ္တိသည် အစိတ်အပိုင်းများ တည်နေရာချသည့်နည်းလမ်းကို သတ်မှတ်ပေးပါသည်။ ဤဂုဏ်သတ္တိကို မကြာခဏဆိုသလို top, right, bottom, left စသည့် ဂုဏ်သတ္တိများနှင့် တွဲဖက်၍ အသုံးပြုလေ့ရှိပြီး ၎င်းတို့သည် အပေါ်၊ ညာ၊ အောက်၊ ဘယ် ဘက်မှ အကွာအဝေးကို အသီးသီး သတ်မှတ်ပေးပါသည်။

ဖွဲ့စည်းပုံ

cssရွေးချယ်သူ {
  position: absolute | relative | fixed | static | sticky;
}

position အတွက် တန်ဖိုးများ

စံထားသော တန်ဖိုး: static.

နမူနာ . အပြည့်အဝ တည်နေရာချခြင်း

အစိတ်အပိုင်းကို စခရင်၏ အပေါ် ဘယ်ဘက်ထောင့်တွင် အကွာအဝေးအနည်းငယ်ဖြင့် နေရာချကြည့်ရအောင်:

html<div class="elem"></div>

<div class="main">
  some long text
</div>

css.elem {
  position: absolute;
  top: 40px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: #98fb98;
}

.main {
  width: 400px;
  text-align: justify;
  margin: 20px auto;
}

Результат:

နမူနာ . အပြည့်အဝ တည်နေရာချခြင်း

ယခုတစ်ခါ အစိတ်အပိုင်းကို စခရင်၏ အပေါ် ညာဘက်ထောင့်တွင် အကွာအဝေးအနည်းငယ်ဖြင့် နေရာချကြည့်ရအောင်:

html<div class="elem"></div>

<div class="main">
  some long text
</div>

css.elem {
  position: absolute;
  top: 40px;
  right: 50px;
  width: 100px;
  height: 100px;
  background-color: #98fb98;
}

.main {
  width: 400px;
  text-align: justify;
  margin: 20px auto;
}

Результат:

နမူနာ . ပုံသေ တည်နေရာချခြင်း

ပုံသေ တည်နေရာချခြင်းတွင် အစိတ်အပိုင်းသည် လှိမ့်သည့်အခါတွင် နေရာတကျ ကျန်ရှိနေပါမည်:

html<div class="elem"></div>

<div class="main">
  some long text
</div>

css.elem {
  position: fixed;
  top: 40px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: #98fb98;
}

.main {
  width: 400px;
  text-align: justify;
  margin: 20px auto;
}

Результат:

နမူနာ . နှိုင်းရ တည်နေရာချခြင်း

နှိုင်းရ တည်နေရာချခြင်းတွင် အစိတ်အပိုင်းသည် ၎င်း၏ ပုံမှန် တည်နေရာနှင့် နှိုင်းယှဉ်၍ ရွေ့သွားသော်လည်း အခြား အစိတ်အပိုင်းများသည် အစိတ်အပိုင်းသည် မရွေ့သကဲ့သို့ အပြုအမူ ပြုမူကြပါသည်:

html<div class="container">
  <div class="elem elem1"></div>
  <div class="elem elem2"></div>
  <div class="elem elem3"></div>
</div>

css.container {
  display: flex;
  justify-content: flex-row;
}

.elem {
  margin: 0 3px;
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

.elem2 {
  position: relative;
  top: 20px;
  left: 30px;
  background-color: #e6addf;
}

Результат:

နမူနာ . အထပ်ထပ်ဖွဲ့ခြင်း

မိဘ၏ position ဂုဏ်သတ္တိတွင် တန်ဖိုး relative ရှိပါက အပြည့်အဝ တည်နေရာချထားသော အစိတ်အပိုင်းများသည် မိဘနှင့် နှိုင်းယှဉ်၍ တည်နေရာချပါလိမ့်မည်:

html<div class="container">
  <div class="elem"></div>
</div>

css.container {
  position: relative;
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  position: absolute;
  top: 0px;
  right: 0px;
  
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

Результат:

နမူနာ . အထပ်ထပ်ဖွဲ့ခြင်း

မိဘ၏ position ဂုဏ်သတ္တိတွင် တန်ဖိုး absolute ရှိပါက အပြည့်အဝ တည်နေရာချထားသော အစိတ်အပိုင်းများသည် မိဘနှင့် နှိုင်းယှဉ်၍ တည်နေရာချပါလိမ့်မည်:

html<div class="container">
  <div class="elem"></div>
</div>

css.container {
  position: absolute;
  top: 30px;
  left: 30px;
  
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  position: absolute;
  top: 0px;
  right: 0px;
  
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

Результат:

နမူနာ . ကပ်နေသော တည်နေရာချခြင်း

အစိတ်အပိုင်းအတွက် position ဂုဏ်သတ္တိသည် တန်ဖိုး sticky ရှိပါက အစိတ်အပိုင်းသည် relative ကဲ့သို့ အပြုအမူပြုမူပြီး လှိမ့်ခြင်းဖြင့် သတ်မှတ်ထားသော တည်နေရာသို့ ရောက်သည့်အခါ နေရာတွင် ကပ်နေပါသည်။ ကပ်နေသော ခေါင်းစီးတစ်ခု ပြုလုပ်ကြည့်ရအောင်:

html<h1>အဓိက ဆိုဒ် ခေါင်းစီး</h1>

<div class="header">header header header</div>

<div class="main">
  some long text
</div>

cssh1 {
  text-align: center;
}

.header {
  position: sticky;
  top: 0;
  
  padding: 20px;
  background: #f0f0f0;
  text-align: center;
  font-weight: bold;
}

.main {
  width: 400px;
  margin: 20px auto;
  border: 1px solid #ccc;
  padding: 20px;
  text-align: justify;
}

Результат:

နမူနာ . တည်နေရာ မပါဘဲ

အစိတ်အပိုင်းအား အပြည့်အဝ တည်နေရာချခြင်းကို တည်နေရာ သတ်မှတ်ခြင်းမပါဘဲ သတ်မှတ်ပါက အစိတ်အပိုင်းသည် တည်နေရာမချဘဲ ရပ်နေသည့် နေရာတွင်ပင် ကျန်ရှိနေပါလိမ့်မည်၊ သို့သော် အခြား အစိတ်အပိုင်းများသည် ၎င်းအား မမြင်တွေ့တော့ပါ:

html<div class="container">
  <div class="elem elem1"></div>
  <div class="elem elem2"></div>
  <div class="elem elem3"></div>
</div>

css.container {
  position: relative;
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  display: inline-block;
}

.elem2 {
  position: absolute;
  
  width: 50px;
  height: 50px;
  background-color: #e6addf;
}
.elem1, .elem3 {
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

Результат:

နမူနာ . ဝင်ရိုးတစ်ခုတည်း

အပြည့်အဝ တည်နေရာချခြင်းတွင် တည်နေရာကို ဝင်ရိုးတစ်ခုတည်းသာ သတ်မှတ်နိုင်ပါသည်။ ဥပမာအားဖြင့် top ဂုဏ်သတ္တိကို သတ်မှတ်ပါက ဒေါင်လိုက်တွင် အစိတ်အပိုင်းသည် လိုအပ်သော တည်နေရာသို့ ရောက်သွားပြီး အလျားလိုက်တွင်မူ ရပ်နေသည့် နေရာတွင်ပင် ကျန်ရှိနေပါမည်:

html<div class="container">
  <div class="elem elem1"></div>
  <div class="elem elem2"></div>
  <div class="elem elem3"></div>
</div>

css.container {
  position: relative;
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  display: inline-block;
}

.elem2 {
  position: absolute;
  top: 20px;
  
  width: 50px;
  height: 50px;
  background-color: #e6addf;
}
.elem1, .elem3 {
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

Результат:

နမူနာ . တည်နေရာ အားလုံး

အပြည့်အဝ တည်နေရာချခြင်းတွင် အကျယ်နှင့် အမြင့်ကို မသတ်မှတ်ဘဲ ဘက်အားလုံးမှ တည်နေရာများကို သတ်မှတ်နိုင်ပါသည်။ ဤသို့ပြုလုပ်ပါက အစိတ်အပိုင်းသည် မိဘဘလောက်၏ အလယ်ဗဟိုတွင် ရပ်တည်ပါလိမ့်မည်:

html<div class="container">
  <div class="elem"></div>
</div>

css.container {
  position: relative;
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background-color: #add8e6;
}

Результат:

ဤသည်ကိုလည်း ကြည့်ပါ