CSS တွင် ကိုဩဒီနိတ်များမပါဘဲ ပေါ့စ်ရှင်အပြည့်အဝ ချထားခြင်း

အမှန်တကယ်တွင် ပေါ့စ်ရှင်အပြည့်အဝ ချထားသည့်အခါ ကိုဩဒီနိတ်များ ဖော်ပြခြင်းသည် မလိုအပ်ပါ။ အကယ်၍ element တစ်ခုအား position ၏တန်ဖိုး အနေဖြင့် absolute ဟုရေးလိုက်ပါက၊ ၎င်းသည် ပေါ့စ်ရှင်အပြည့်အဝ ချထားခံရသော်လည်း ၎င်းရပ်တည်ခဲ့သည့်နေရာတွင်ပင် ဆက်လက်ရပ်တည်နေမည်ဖြစ်သည်။ ထိုအခါ ကျန်အခြား element အားလုံးသည် ကျွန်ုပ်တို့၏ element မရှိသကဲ့သို့ ပြုမူပြီး ၎င်းပေါ်သို့ လာရောက်တိုးဝင်နိုင်သည်။

ဥပမာများဖြင့် ကြည့်ရှုကြပါစို့။

ဥပမာ

ပထမဦးစွာ ပေါ့စ်ရှင်မချထားဘဲ ဘလောက်သုံးခုနှင့် ၎င်းတို့ကြားတွင် စာသားအချို့ကို ပြုလုပ်ကြပါစို့။

<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>

#elem1 {
	width: 200px;
	height: 150px;
	border: 1px solid red;
}
#elem2 {
	width: 100px;
	height: 100px;
	margin-left: 10px;
	border: 1px solid green;
}
#elem3 {
	width: 50px;
	height: 150px;
	border: 1px solid blue;
}

ဥပမာ

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

<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>

#elem1 {
	width: 200px;
	height: 150px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	width: 100px;
	height: 100px;
	margin-left: 10px;
	border: 1px solid green;
}
#elem3 {
	width: 50px;
	height: 150px;
	border: 1px solid blue;
}

ဥပမာ

ယခု အလျားလိုက် နေရာချထားမှုကိုသာ ဖော်ပြပြီး၊ ဒေါင်လိုက် နေရာချထားမှုကို ထည့်သွင်းခြင်းမရှိဘဲ property left ကို ထည့်ကြပါစို့။ ရလဒ်အနေဖြင့် အလျားလိုက်တွင် ကျွန်ုပ်တို့၏ဘလောက်သည် ဖော်ပြထားသည့်တန်ဖိုးအတိုင်း နေရာယူမည်ဖြစ်ပြီး၊ ဒေါင်လိုက်တွင် ၎င်းရပ်တည်ခဲ့သည့်နေရာတွင်ပင် ဆက်လက်ရပ်တည်နေမည်ဖြစ်သည်။

<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>

#elem1 {
	width: 200px;
	height: 150px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	left: 40px; /* အလျားလိုက် နေရာချထားမှုကို ထည့်သွင်းခြင်း */
	
	width: 100px;
	height: 100px;
	margin-left: 10px;
	border: 1px solid green;
}
#elem3 {
	width: 50px;
	height: 150px;
	border: 1px solid blue;
}

ဥပမာ

ယခု ပြောင်းပြန်၊ အလျားလိုက် နေရာချထားမှုကို ထည့်သွင်းခြင်းမရှိဘဲ property top ကို ထည့်ကြပါစို့။ ရလဒ်အနေဖြင့် ဒေါင်လိုက်တွင် ကျွန်ုပ်တို့၏ဘလောက်သည် ဖော်ပြထားသည့်တန်ဖိုးအတိုင်း နေရာယူမည်ဖြစ်ပြီး၊ အလျားလိုက်တွင် ၎င်းရပ်တည်ခဲ့သည့်နေရာတွင်ပင် ဆက်လက်ရပ်တည်နေမည်ဖြစ်သည်။

<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>

#elem1 {
	width: 200px;
	height: 150px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 100px; /* ဒေါင်လိုက် နေရာချထားမှုကို ထည့်သွင်းခြင်း */
	
	width: 100px;
	height: 100px;
	margin-left: 10px;
	border: 1px solid green;
}
#elem3 {
	width: 50px;
	height: 150px;
	border: 1px solid blue;
}