z-index ဂုဏ်သတ္တိ

z-index ဂုဏ်သတ္တိသည် အရာဝတ္ထုများစွာ တစ်ခုပေါ်တစ်ခု ထပ်နေပါက မည်သည့်အရာဝတ္ထုက ထိပ်ဆုံးတွင်ရှိမည်ကို သတ်မှတ်ပေးသည်။

ဝါကျဖွဲ့စည်းပုံ

ရွေးချယ်သူ {
	z-index: ဂဏန်း | auto;
}

ဂဏန်းသည် ကိန်းပြည့်ဖြစ်ရမည်၊ အပြုသဘော (သို့) အနုတ်သဘော ဖြစ်နိုင်သည်။ သုညလည်း ဖြစ်နိုင်သည်။

တန်ဖိုးများ

တန်ဖိုး ဖော်ပြချက်

ဂဏန်း ကိန်းပြည့်သည် အရာဝတ္ထုများ ထပ်ဆင့်မှု အစီအစဉ်ကို သတ်မှတ်ပေးသည်- အရာဝတ္ထုများတစ်ခုပေါ်တစ်ခု ထပ်နေသောအခါ ထိပ်ဆုံးတွင် ရှိမည်မှာ မည်သည့်အရာဝတ္ထုက z-index ပိုကြီးသလဲဆိုတာပေါ်မူတည်သည်။

auto ထပ်ဆင့်မှု အစီအစဉ်ကို အလိုအလျောက် တည်ဆောက်သည်- HTML ကုဒ်ထဲတွင် နောက်ဆုံးမှ ရေးသားထားသော အရာဝတ္ထုသည် အပေါ်ဆုံးတွင် ရှိမည်။

တန်ဖိုး	ဖော်ပြချက်
ဂဏန်း	ကိန်းပြည့်သည် အရာဝတ္ထုများ ထပ်ဆင့်မှု အစီအစဉ်ကို သတ်မှတ်ပေးသည်- အရာဝတ္ထုများတစ်ခုပေါ်တစ်ခု ထပ်နေသောအခါ ထိပ်ဆုံးတွင် ရှိမည်မှာ မည်သည့်အရာဝတ္ထုက `z-index` ပိုကြီးသလဲဆိုတာပေါ်မူတည်သည်။
`auto`	ထပ်ဆင့်မှု အစီအစဉ်ကို အလိုအလျောက် တည်ဆောက်သည်- HTML ကုဒ်ထဲတွင် နောက်ဆုံးမှ ရေးသားထားသော အရာဝတ္ထုသည် အပေါ်ဆုံးတွင် ရှိမည်။

စံထားသော တန်ဖိုး- auto.

နမူနာ

ဤနမူနာတွင် ဘလောက်များသည် ၎င်းတို့၏ HTML ကုဒ်အတွင်းရှိ တစ်ခုနောက်တစ်ခု လိုက်နာမှု အစီအစဉ်အတိုင်း တစ်ခုပေါ်တစ်ခု ထပ်မည် (z-index မသတ်မှတ်ထားပါ၊ စံထားသော တန်ဖိုး- auto ကို ရထားမည်)။ ပထမဆုံး ဘလောက်သည် အအောက်ဆုံးတွင် ရှိမည် (အနီရောင်)၊ နောက်ဆုံး ဘလောက်သည် အပေါ်ဆုံးတွင် ရှိမည် (အစိမ်းရောင်)-

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

#div1 {
	position: absolute;
	top: 30px;
	left: 30px;
	width: 50px;
	height: 50px;
	background: red;
}
#div2 {
	position: absolute;
	top: 60px;
	left: 60px;
	width: 50px;
	height: 50px;
	background: blue;
}
#div3 {
	position: absolute;
	top: 90px;
	left: 90px;
	width: 50px;
	height: 50px;
	background: green;
}

နမူနာ

z-index သတ်မှတ်ပေးခြင်းဖြင့် ထပ်ဆင့်မှု အစီအစဉ်ကို ပြောင်းလဲကြည့်ပါ။ အနီရောင် ဘလောက်အား - 3၊ အပြာရောင် ဘလောက်အား - 2၊ အစိမ်းရောင် ဘလောက်အား - 1 ဟု သတ်မှတ်ပါ။ ထပ်ဆင့်မှု အစီအစဉ်သည် ပြောင်းပြန်ဖြစ်သွားမည် (ထိပ်ဆုံးတွင် ရှိမည်မှာ z-index 3 ရှိသော ဘလောက်ဖြစ်မည်)-

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

#div1 {
	position: absolute;
	top: 30px;
	left: 30px;
	width: 50px;
	height: 50px;
	background: red;
	z-index: 3;
}
#div2 {
	position: absolute;
	top: 60px;
	left: 60px;
	width: 50px;
	height: 50px;
	background: blue;
	z-index: 2;
}
#div3 {
	position: absolute;
	top: 90px;
	left: 90px;
	width: 50px;
	height: 50px;
	background: green;
	z-index: 1;
}