شاخص Z (Z-index)
«شاخص Z (Z-index)» ترتیب روی هم افتادن عناصر را مشخص می کند. معنی «پشته (Stack)» یعنی کدام جلوتر دیده شود. حتماً عنصر «موقعیت دار (Positioned)» باشد یا «آیتم فلکس (Flex Item)» باشد.
تعریف شاخص Z (Z-index)
z-index روی عناصرِ دارای position کار می کند. مقدار بزرگ تر یعنی جلوتر. مقدار کوچک تر یعنی عقب تر. مقدار منفی هم مجاز است.
مثال: تصویر پشتِ متن با مقدار منفی
<style>
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
</style>
<div>این متن جلوتر دیده می شود</div>
<img src="tree.png" alt="درخت">
مقایسه چند لایه با اعداد متفاوت
وقتی چند عنصر همپوشانی دارند، هرکدام z-index بزرگ تر دارد، جلوتر دیده می شود.
<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>
<div class="container">
<div class="black-box">Black</div>
<div class="gray-box">Gray</div>
<div class="green-box">Green</div>
</div>
وقتی z-index ندهیم چه می شود؟
اگر z-index نگذاریم، ترتیب بر اساس ترتیب کد HTML است. عنصرهای بعدی، روی قبلی ها دیده می شوند.
<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>
<div class="container">
<div class="black-box">Black</div>
<div class="gray-box">Gray</div>
<div class="green-box">Green</div>
</div>
نکته: z-index فقط روی عناصرِ دارای موقعیت دهی (Position) اثر دارد یا روی «آیتم های فلکس». برای مرور رفتار نمایش، صفحه نمایش (Display) را ببین.
گام های عملی
- به عنصر، position غیرِ static بده.
- برای هرکدام یک z-index تعیین کن.
- با اعداد بازی کن و نتیجه را ببین.
شاخص Z پایه چیدمان لایه هاست. کنار «موقعیت دهی» بهترین نتیجه را می دهد.
جمع بندی سریع
- z-index ترتیب لایه ها را مشخص می کند.
- فقط روی عناصرِ موقعیت دار اثر دارد.
- عدد بزرگ تر یعنی جلوتر.
- بدون مقدار، ترتیب کد ملاک است.