خاصیت z-index ترتیب قرارگیری یا لایه‌بندی عناصر را در محور عمودی (در صفحه) مشخص می‌کند. این ویژگی تعیین می‌کند که کدام عنصر در جلوتر یا عقب‌تر از عناصر دیگر قرار بگیرد.
کاربرد خاصیت z-index
هنگامی که عناصر با استفاده از موقعیت‌دهی (position) قرار می‌گیرند، ممکن است با یکدیگر هم‌پوشانی داشته باشند. با استفاده از z-index می‌توان مشخص کرد که کدام عنصر بالاتر و کدام عنصر پایین‌تر از سایرین نمایش داده شود.
مقادیر z-index
- مقادیر مثبت برای جلوتر نمایش دادن عنصر نسبت به عناصر دیگر استفاده می‌شوند.
- مقادیر منفی برای قرار دادن عنصر پشت سایر عناصر به کار می‌روند.
مثال: عنصری با z-index منفی
در این مثال، تصویر به دلیل داشتن مقدار z-index منفی پشت متن قرار می‌گیرد:
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}نکته: خاصیت z-index تنها بر روی عناصر دارای موقعیت‌دهی (مثل absolute، relative، fixed یا sticky) و آیتم‌های فلکس (flex items) اعمال می‌شود.
مثال: ترتیب لایه‌بندی چند عنصر
در این مثال، سه عنصر با z-index های متفاوت قرار دارند. عنصر با مقدار بالاتر z-index همیشه بالاتر از عناصر با مقدار کمتر نمایش داده می‌شود:
<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-index 3 بالاتر از سایر جعبه‌ها نمایش داده می‌شود، سپس جعبه سبز با z-index 2، و جعبه سیاه در پایین‌ترین لایه با z-index 1 قرار می‌گیرد.
مثال بدون استفاده از z-index
اگر دو عنصر دارای موقعیت‌دهی با یکدیگر هم‌پوشانی داشته باشند اما z-index برای آن‌ها مشخص نشده باشد، عنصری که در HTML دیرتر تعریف شده باشد، بالاتر از سایرین نمایش داده می‌شود.
<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>در این مثال، به دلیل نبود خاصیت z-index، جعبه سبز که آخرین عنصر تعریف شده است، بالاتر از سایر عناصر قرار می‌گیرد.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام