Z-index و انباشتن زمینه ها

CSS Podcast - 019: z-index and stacking contexts

فرض کنید چند عنصر دارید که کاملاً قرار گرفته اند و قرار است روی هم قرار گیرند. ممکن است کمی HTML مانند این بنویسید:

<div class="stacked-items">
    <div class="item-1">Item 1</div>
    <div class="item-2">Item 2</div>
</div>

اما کدام یک به طور پیش فرض روی دیگری قرار می گیرد؟ برای اینکه بدانید کدام مورد این کار را انجام می دهد، باید زمینه های z-index و stacking را بدانید.

شاخص Z

ویژگی z-index به صراحت یک ترتیب لایه را برای HTML بر اساس فضای سه بعدی مرورگر - محور Z تنظیم می کند. این محوری است که نشان می‌دهد کدام لایه‌ها به شما نزدیک‌تر و دورتر هستند. محور عمودی در وب، محور Y و محور افقی، محور X است.

ویژگی z-index مقدار عددی را می پذیرد که می تواند یک عدد مثبت یا منفی باشد. اگر عناصر دارای مقدار z-index بالاتر باشند، بالای عنصر دیگری ظاهر می شوند. اگر هیچ z-index روی عناصر شما تنظیم نشده باشد، رفتار پیش فرض این است که ترتیب منبع سند، محور Z را دیکته می کند. این بدان معناست که عناصر پایین‌تر سند بر روی عناصری قرار می‌گیرند که قبل از آنها ظاهر می‌شوند.

در جریان عادی، اگر مقدار خاصی را برای z-index تنظیم کرده اید و کار نمی کند، باید مقدار position عنصر را روی هر چیزی غیر از static تنظیم کنید. این یک مکان رایج است که در آن افراد با z-index مبارزه می کنند.

اما اگر در یک زمینه انعطاف‌پذیر یا شبکه‌ای هستید، این مورد صدق نمی‌کند، زیرا می‌توانید شاخص z اقلام flex یا grid را بدون اضافه کردن position: relative تغییر دهید.

شاخص z منفی

برای تنظیم یک عنصر در پشت عنصر دیگر، یک مقدار منفی برای z-index اضافه کنید.

.my-element {
    background: rgb(232 240 254 / 0.4);
}

.my-element .child {
    position: relative;
    z-index: -1;
}

تا زمانی که .my-element مقدار اولیه z-index auto را داشته باشد، عنصر .child پشت آن قرار می گیرد.

CSS زیر را به .my-element اضافه کنید تا عنصر .child پشت آن قرار نگیرد.

.my-element {
  position: relative;
  z-index: 0;
  background: rgb(232 240 254 / 0.4);
}

از آنجا که .my-element اکنون دارای یک مقدار position است که static نیست و یک مقدار z-index که auto نیست، یک زمینه انباشته جدید ایجاد کرده است. این به این معنی است که حتی اگر .child برای داشتن z-index از -999 تنظیم کنید، باز هم پشت .my-parent نمی‌نشیند.

انباشتن زمینه

بافت پشته ای گروهی از عناصر است که دارای یک والد مشترک هستند و با هم در محور z حرکت می کنند.

در این مثال، اولین عنصر والد دارای z-index 1 است، بنابراین یک زمینه انباشته جدید ایجاد می کند. عنصر فرزند آن دارای z-index 999 است. در کنار این والد، عنصر والد دیگری با یک فرزند وجود دارد. والد دارای z-index 2 و عنصر فرزند نیز دارای z-index 2 است. از آنجایی که هر دو والدین یک زمینه انباشته ایجاد می کنند، z-index همه کودکان بر اساس والدین آنها است.

z-index عناصر درون یک زمینه انباشته همیشه به ترتیب فعلی والد در زمینه انباشتگی خودش نسبت دارد.

ایجاد یک زمینه انباشته

برای ایجاد یک بافت انباشته جدید نیازی به اعمال z-index و position ندارید. می‌توانید با افزودن مقداری برای ویژگی‌هایی که یک لایه ترکیبی جدید مانند opacity ، will-change و transform ایجاد می‌کنند، یک زمینه انباشته جدید ایجاد کنید. لیست کامل املاک را می توانید اینجا ببینید .

برای توضیح اینکه لایه کامپوزیت چیست، تصور کنید یک صفحه وب یک بوم است. یک مرورگر HTML و CSS شما را می گیرد و از آنها برای اندازه گیری بوم استفاده می کند. سپس صفحه را روی این بوم نقاشی می کند. اگر قرار بود عنصری تغییر کند - مثلاً موقعیتش را تغییر دهد - مرورگر باید به عقب برگردد و دوباره کار کند که چه چیزی را نقاشی کند.

برای کمک به عملکرد، مرورگر لایه های ترکیبی جدیدی ایجاد می کند که در بالای بوم قرار می گیرند. اینها کمی شبیه یادداشت‌های پس از آن هستند: جابه‌جایی یکی و تغییر آن تأثیر زیادی بر روی بوم کلی ندارد. یک لایه ترکیبی جدید برای عناصری با opacity ، transform و will-change ایجاد می‌شود، زیرا احتمال تغییر آن‌ها بسیار زیاد است، بنابراین مرورگر با استفاده از GPU برای اعمال تنظیمات سبک، مطمئن می‌شود که تغییر تا حد ممکن انجام می‌شود.

منابع

• لایه های اجباری
• راهنمای انیمیشن ها: ایجاد لایه اجباری
• آشنایی با شاخص z

درک خود را بررسی کنید

دانش خود را از z-index تست کنید

<section>
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
</section>