position ဂုဏ်သတ္တိ

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

ဖွဲ့စည်းပုံ

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

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

တန်ဖိုး	ဖော်ပြချက်
`absolute`	အပြည့်အဝ တည်နေရာချခြင်း။ အစိတ်အပိုင်းကို စာရွက်စာတမ်း၏ ပုံမှန် အစီအစဉ်မှ ဖယ်ရှားပြီး အနီးဆုံး တည်နေရာချထားသော မိဘအစိတ်အပိုင်း (ရှိလျှင်) သို့မဟုတ် ဘရောက်ဆာ၀င်းဒိုးကို အခြေခံ၍ တည်နေရာချပါသည်။
`relative`	နှိုင်းရ တည်နေရာချခြင်း။ အစိတ်အပိုင်းသည် ၎င်း၏ စာရွက်စာတမ်းတွင် ပုံမှန် တည်နေရာနှင့် နှိုင်းယှဉ်၍ �ွေ့လျားသွားသော်လည်း ၎င်း နေရာယူထားသည့် နေရာသည် ကျန်ရှိနေပါသည်။
`fixed`	ပုံသေ တည်နေရာချခြင်း။ အစိတ်အပိုင်းကို စာရွက်စာတမ်း၏ ပုံမှန် အစီအစဉ်မှ ဖယ်ရှားပြီး ဘရောက်ဆာ၀င်းဒိုးကို အခြေခံ၍ တည်နေရာချပါသည်။ စာမျက်နှာ လှိမ့်သည့်အခါတွင် နေရာတကျ ကျန်ရှိနေပါသည်။
`static`	ငြိမ်သက်နေသော တည်နေရာချခြင်း။ ဤတန်ဖိုးသည် တည်နေရာချခြင်း မရှိကြောင်း ဆိုလိုပြီး အစိတ်အပိုင်းသည် ပုံမှန်အတိုင်း အပြုအမူ ပြုမူပါသည်။
`sticky`	ကပ်နေသော တည်နေရာချခြင်း။ အစိတ်အပိုင်းသည် သတ်မှတ်ထားသော တည်နေရာသို့ လှိမ့်ခြင်းဖြင့် မရောက်မချင်း `relative` ကဲ့သို့ အပြုအမူပြုမူပြီး ထို့နောက် သတ်မှတ်ထားသော နေရာတွင် ကပ်နေပါသည် (`fixed` ကဲ့သို့)။

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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 ရှိပါက အပြည့်အဝ တည်နေရာချထားသော အစိတ်အပိုင်းများသည် မိဘနှင့် နှိုင်းယှဉ်၍ တည်နေရာချပါလိမ့်မည်:

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

.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 ရှိပါက အပြည့်အဝ တည်နေရာချထားသော အစိတ်အပိုင်းများသည် မိဘနှင့် နှိုင်းယှဉ်၍ တည်နေရာချပါလိမ့်မည်:

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

.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 ကဲ့သို့ အပြုအမူပြုမူပြီး လှိမ့်ခြင်းဖြင့် သတ်မှတ်ထားသော တည်နေရာသို့ ရောက်သည့်အခါ နေရာတွင် ကပ်နေပါသည်။ ကပ်နေသော ခေါင်းစီးတစ်ခု ပြုလုပ်ကြည့်ရအောင်:

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

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

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

h1 {
	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;
}

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

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

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

.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 ဂုဏ်သတ္တိကို သတ်မှတ်ပါက ဒေါင်လိုက်တွင် အစိတ်အပိုင်းသည် လိုအပ်သော တည်နေရာသို့ ရောက်သွားပြီး အလျားလိုက်တွင်မူ ရပ်နေသည့် နေရာတွင်ပင် ကျန်ရှိနေပါမည်:

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

.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;
}

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

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

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

.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;
}

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

z-index ဂုဏ်သတ္တိ,
အစိတ်အပိုင်းများ အထပ်ထပ်ခြင်းကို သတ်မှတ်ပေးပါသည်