شاخص Z در CSS (CSS Z-index)
«شاخص Z (Z-index)» ترتیب لایه ای عناصرِ موقعیت دار را مشخص می کند. وقتی عناصر با هم هم پوشانی دارند، مقدار بزرگ تر در جلو و مقدار کوچک تر در پشت نمایش داده می شود. این ویژگی فقط برای عناصرِ دارای position یا آیتم های flex اثر دارد.
کاربرد شاخص Z
پس از موقعیت دهی با position می توانید با z-index تعیین کنید کدام لایه جلوتر دیده شود. مقدار می تواند منفی، صفر یا مثبت باشد.
نمونه: تصویر پشت متن با z-index منفی
در این مثال، تصویر به پشت متن می رود چون z-index آن منفی است:
img{ position: absolute; left:0; top:0; z-index:-1; }نکته: شاخص Z فقط روی عناصرِ position: absolute|relative|fixed|sticky و «آیتم های flex» اعمال می شود.
مقایسه با و بدون شاخص Z
اگر چند عنصرِ موقعیت دار هم پوشان شوند و هیچ z-index نداشته باشند، ترتیب نمایش همان ترتیب حضور در کد HTML است.
نمونه: تعیین لایه ها با z-index
«جعبه خاکستری» با مقدار بزرگ تر جلوتر از بقیه نمایش داده می شود:
.container{ position:relative; }.black-box{ position:relative; z-index:1; border:2px solid #000; 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; }نمونه: بدون z-index
در نبود شاخص Z، ترتیب لایه ها همان ترتیب تعریف در HTML خواهد بود:
.container{ position:relative; }.black-box{ position:relative; border:2px solid #000; 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; }هشدار: عناصر با absolute یا fixed از جریان خارج می شوند و ممکن است روی محتوا بیفتند؛ در صورت نیاز از overflow کمک بگیرید.
مطالعه بیشتر درباره شاخص Z
مستندات MDN برای شاخص Z و صفحه آموزشی W3Schools را ببینید. برای مرور «شاخص Z» در مجموعه ما، به همین صفحه با کلیدواژه شاخص Z مراجعه کنید.