در دنیای طراحی وب، ویژگی z-index نقش مهمی در نظم‌دهی و ترتیب نمایش عناصر دارد.
ویژگی z-index به طور خاص به ما امکان می‌دهد تا کنترل کنیم که کدام عنصر در هنگام لایه‌بندی در جلو و کدام عنصر در پشت قرار گیرد. این ویژگی به خصوص برای کار با منوهای کشویی، پنجره‌های مودال و نمایش محتواهای همپوشان بسیار مفید است.
فرض کنید چندین عنصر بر روی یکدیگر قرار دارند، به کمک ویژگی z-index می‌توانیم ترتیب نمایش آن‌ها را به راحتی تنظیم کنیم. عدد بالاتر برای این ویژگی، به معنای نمایش در جلوی عناصر دیگر است.
ادراک z-index ساده به نظر می‌رسد، اما باید توجه کرد که این ویژگی تنها روی عناصری کار می‌کند که دارای موقعیت نسبی (position: relative;), مطلق (position: absolute;), یا ثابت (position: fixed;) هستند. بنابراین اگر به نظر می‌رسد که z-index کار نمی‌کند، اولین جایی که باید چک کنیم، موقعیت (position) عنصر است.
در ادامه به کدهای نمونه و توضیح آن‌ها می‌پردازیم که می‌تواند در پروژه‌های واقعی به کار بیاید.
<style>
.box1 {
position: relative;
z-index: 10;
width: 100px;
height: 100px;
background-color: red;
}
.box2 {
position: relative;
z-index: 5;
width: 100px;
height: 100px;
background-color: blue;
margin-top: -50px;
margin-left: 50px;
}
</style>
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
توضیح خط به خط کد:
.box1 عنصر با کلاس
box1 تعریف شده است. position: relative; موقعیت عنصر نسبت به مکان پیش‌فرض خود تغییر کرده است.
z-index: 10; ترتیب نمایش این عنصر برابر ۱۰ است، بنابراین بالاتر از عناصری با
z-index پایین‌تر قرار می‌گیرد. background-color: red; رنگ زمینه عنصر قرمز است.
.box2 عنصر دوم با یک
z-index پایین‌تر تعریف شده است. margin-top: -50px; باعث همپوشانی جزئی عنصر دوم بر روی اولی می‌شود، اما همچنان زیر عنصر اول باقی می‌ماند به دلیل
z-index پایین‌تر.