CSS Layout - z-index Property
ပိုင်ဆိုင်မှု သည် z-index
ဒြပ်စင်တစ်ခု၏ stack အစီအစဉ်ကို သတ်မှတ်သည်။
z-index Property
အစိတ်အပိုင်းများကို နေရာချထားသောအခါ၊ ၎င်းတို့သည် အခြားဒြပ်စင်များကို ထပ်နေနိုင်သည်။
ပိုင်ဆိုင်မှု သည် z-index
ဒြပ်စင်တစ်ခု၏ အစုအစည်းအစီအစဥ်ကို သတ်မှတ်သည် (မည်သည့်ဒြပ်စင်ကို ရှေ့ သို့မဟုတ် နောက်တွင်ထားသင့်သည်)။
ဒြပ်စင်တစ်ခုတွင် အပြုသဘော သို့မဟုတ် အနုတ်လက္ခဏာ အစုအစီအစဉ် ရှိနိုင်သည်-
ဒါက ခေါင်းစဉ်တစ်ခုပါ။
ပုံတွင် z-အညွှန်းကိန်း -1 ရှိသောကြောင့်၊ ၎င်းကို စာသားနောက်တွင် ထားရှိမည်ဖြစ်သည်။
ဥပမာ
img
{
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
မှတ်ချက်- နေရာချထားသော ဒြပ်စင်များ (အနေအထား- ပကတိ၊ အနေအထား- ဆွေမျိုး၊ အနေအထား- ပုံသေ၊ သို့မဟုတ် အနေအထား- ကပ်စေး) နှင့် ကန့်လ န့်ဖြတ်အရာများ
(ပြသမှု၏ တိုက်ရိုက်ကလေးများဖြစ်သည်- ဖလိတ်ဒြပ်စင်များ) z-index
တွင်သာ အလုပ်လုပ်သည် ။
နောက်ထပ် z-index ဥပမာ
ဥပမာ
ဤတွင် ပိုကြီးသော stack အစီစဥ်ရှိသော အရာသည် နိမ့်သော stack အစီအစဥ်တစ်ခုထက် အမြဲရှိနေသည်ကို ကျွန်ုပ်တို့မြင်ရသည်-
<html>
<head>
<style>
.container {
position: relative;
}
.black-box {
position: relative;
z-index: 1;
border: 2px solid black;
height: 100px;
margin: 30px;
}
.gray-box {
position: absolute;
z-index: 3;
background: lightgray;
height: 60px;
width: 70%;
left: 50px;
top: 50px;
}
.green-box {
position: absolute;
z-index: 2;
background: lightgreen;
width: 35%;
left: 270px;
top: -15px;
height:
100px;
}
</style>
</head>
<body>
<div class="container">
<div
class="black-box">Black box</div>
<div class="gray-box">Gray
box</div>
<div class="green-box">Green box</div>
</div>
</body>
</html>
z-အညွှန်းမပါဘဲ
သတ်မှတ်ထား သည့်နေရာမရှိသော ဒြပ်စင်နှစ်ခုသည် တစ်ခုနှင့်တစ်ခု ထပ်နေပါက ၊ HTML ကုဒ်တွင် နောက်ဆုံးz-index
သတ်မှတ်ထားသော ဒြပ်စင် ကို အပေါ်ဆုံးတွင် ပြသပါမည်။
ဥပမာ
အထက်ဖော်ပြပါ ဥပမာနှင့် တူညီသော်လည်း ဤနေရာတွင် z-အညွှန်းကို ဖော်ပြထားခြင်းမရှိပါ။
<html>
<head>
<style>
.container {
position: relative;
}
.black-box {
position: relative;
border: 2px solid black;
height: 100px;
margin: 30px;
}
.gray-box {
position: absolute;
background: lightgray;
height: 60px;
width: 70%;
left: 50px;
top: 50px;
}
.green-box {
position: absolute;
background: lightgreen;
width: 35%;
left: 270px;
top: -15px;
height:
100px;
}
</style>
</head>
<body>
<div class="container">
<div
class="black-box">Black box</div>
<div class="gray-box">Gray
box</div>
<div class="green-box">Green box</div>
</div>
</body>
</html>
CSS ပိုင်ဆိုင်မှု
Property | Description |
---|---|
z-index | Sets the stack order of an element |