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-index تست کنید
<section>
<article>1</article>
<article>2</article>
<article>3</article>
<article>4</article>
</section>
کدام مقاله به طور پیش فرض در بالای صفحه قرار دارد؟
اگر z-index کار نمی کند، چه ویژگی را باید در عنصر خود بررسی کنید؟
position
animation
relative
display
آیا فلکس باکس و گرید به position: relative
نیاز دارند؟