درک z-index در CSS

وقتی صحبت از CSS و طراحی وب می‌شود، یکی از موضوعاتی که زیاد مطرح می‌شود، مفهوم z-index است. z-index به ما اجازه می‌دهد لایه‌بندی عناصر را در صفحات وب، به صورتی کاملاً دلخواه تعریف کنیم. اما گاهی اوقات این موضوع می‌تواند گیج کننده باشد، به خصوص وقتی با رفتار غیرقابل پیش‌بینی مرورگرها روبرو می‌شویم. بیایید نگاهی دقیق‌تر به این مفهوم بیاندازیم تا بفهمیم چگونه می‌توانیم از آن به بهترین نحو استفاده کنیم.

اول از همه، باید بدانیم که ز-index فقط برای عناصر موقعیت‌دار (positioned) کار می‌کند. این یعنی عناصری که با position: relative; یا position: absolute; تعریف شده‌اند. وقتی چند عنصر موقعیت‌دار داریم، z-index اولویت را به ترتیب عددی مشخص می‌کند.

اگر دو عنصر روی هم بیافتند، عنصری که ز-index بالاتری دارد، بر روی عنصر دیگر قرار می‌گیرد. برای مثال، عدد ۵ بالاتر از ۱ است و به همین دلیل عنصری با z-index: ۵ بر روی عنصری با z-index: ۱ قرار می‌گیرد.

اما مشکلات ممکن است زمانی پیش بیاید که هیچ‌گونه z-index برای برخی عناصر تعریف نشده است. در این وضعیت، مرورگر به طور پیش‌فرض عدد صفر را در نظر می‌گیرد و ترتیب لایه‌ها به ترتیب قرارگیری در DOM تنظیم می‌شود.

مثال عملی از کد Z-index در CSS

    <div class="container">
        <div class="box" style="position: relative; z-index: 1;">Box 1</div>
        <div class="box" style="position: relative; z-index: 3;">Box 2</div>
        <div class="box" style="position: relative; z-index: 2;">Box 3</div>
    </div>
  

توضیح خط به خط کد:

<div class="container">
در اینجا یک عنصر دیو با کلاس container ایجاد کرده‌ایم که به عنوان ظرف عناصر دیگر عمل می‌کند.

<div class="box" style="position: relative; z-index: 1;">Box 1</div>
این عنصر جعبه‌ای با موقعیت relative و z-index: 1 است که در پشت عناصر با z-index بالاتر قرار می‌گیرد.

<div class="box" style="position: relative; z-index: 3;">Box 2</div>
این عنصر، ز-index بالاتری دارد و بر روی تمامی عناصر با ز-index کمتر قرار می‌گیرد.

<div class="box" style="position: relative; z-index: 2;">Box 3</div>
این عنصر با z-index: 2، بین Box 1 و Box 2 قرار می‌گیرد.

</div>
پایان تگ والد، که تمامی جعبه‌ها را در بر می‌گیرد.