z-index

سلام دوستان با اموزشی دیگر در زمینه css در خدمت شما هستیم
وقتی دو یا چند تا المنت توی صفحه طوری قرار میگیرند که قسمت های از آنها با هم از نظر مکان مشترک میشون و شما میتونید با z-index مشخص کنید کدوم یک از اون المنت ها نشون داده بشن و یا در واقع کدون بالا تر از اون یکیه این توضیح خودمونی خیلی هم بی راه نیست چون در واقع z-index بعد سوم صفحست اگر صفحه رو دو بعدی فرض کنیم که شامل x , y و بعد سوم z

قبل از رفتن سراغ جزئیات z-index ، دو تا دید کلی نسبت به المان های صفحه رو بررسی میکنیم اولیش دید مفهومی یا طبقه ای و دومیش دید ترتیبی
دید طبقه ای
یک اتاقی رو فرض کنید که یک میز توی اون قرار داره ، روی میز یک بشقاب هست و روی بشقاب یک سیب r وقتی از بالا به این اتاق نگاه می کنید سیب نزدیکترین شیء به شما و بعد از اون بشقاب و میز خوب در اینجا اتاق ،میز ، بشقاب،سیب هر طبقه از مدل مفهمومی ما هستند که هر کدام داخل دیگری قرار گرفتند و اولویت نمایشی درونی ترین اونها یعنی سیب برای چشم ما بیشتره خوب حالا با در نظر گرفتن این مدل ساختار زیر رو در نظر بگیرید
view plaincopy to clipboardprint?

<div id=”table”>
<div id=”plate”>
<div id=”apple”> </div>
</div>
</div>

دید ترتیبی
فرض کنید توی مثال بالا ما چند میز دیگر توی اتاق داشتیم یا چند بشقاب دیگر روی میز که با هم در فضای دو بعدی اشتراک مکانی داشتند اونوقت اولویت رو بر اساس ۷ پارامتر زیر بدست میاد

۱: پس زمینه و حاشیه
۲: z-index منفی
۳: المانی با display Block
۴: المانی float دار !
۵: المانی با display inline
۶: z-index صفر
۷: z-index مثبت

برا مثال المتنی که float دار باشه اولویت نمایش بیشتر نسبت به یک المنت ساده مانند div که تو حالت پیش فرض display block داره
این ۷ طبقه اولویتی که w3 معرفی کرده که به نظر من یک طبقه قبل از اینها وجود داره به نام جایگاه . که در اصل قبل از اینکه این ۷ مرحله تو دید ترتیبی بررسی بشه ، جایگاه اون توی سورس بررسی میشه.در واقه در هر طبقه المانهایی های آخری(ازنظر جایگاهشون در سورس) اولویت ظاهری بیشتری دارند که من برای اینکه دستی تو اون مرحله نبرم اسمشو گذاشتم : ” مرحله صفر : جایگاه “

z-index salimian.me

نقش z-index این وسط
در واقع با تعریف کردن z-index ما یک دید(ساختار) جدید را به موتور مرورگر القا کردیم ودر واقع میز جدیدی در اتاق تعریف کردیم

یک اشتباه رایج وجو داره که z-index توی حالت عادی صفره . در حالی که توی شکل بالا می بینیم که نه صفره نه منفیه در واقع بین صفر و عدد منفی ۱ ، صفر منفی !

یک مثال
دید و پردازش موتور مرورگر در واقع ترکیبی است از هر دو دید طبقه ای و ترتیبی . به مثال زیر توجه کنید
view plaincopy to clipboardprint?

<div id=”ex-table”>
<div id=”ex-plate”>
<div id=”ex-apple”> </div>
</div>
</div>
<div id=”ex-table2″> </div>

view plaincopy to clipboardprint?

#ex-table{
background:#c89bd1;
position:absolute;
width:300px;
height:300px;
top:5px;
left:5px;
border: 5px solid rgba(0, 0, 0, 0.3);
border-radius: 2px;
color:#fff;
z-index:10;
}
#ex-plate{
background:#4e80c4;
position:absolute;
width:200px;
height:200px;
top:30px;
left:5px;
border: 5px solid rgba(0, 0, 0, 0.3);
border-radius: 2px;
z-index:20;
}
#ex-apple{
background:#ea3f32;
position:absolute;
width:100px;
height:100px;
top:30px;
left:5px;
border: 5px solid rgba(0, 0, 0, 0.3);
border-radius: 2px;
z-index:30;
}
#ex-table2{
background:#4ec4ac;
position:absolute;
width:150px;
height:150px;
top:125px;
left:50px;
border: 5px solid rgba(0, 0, 0, 0.3);
border-radius: 2px;
z-index:15;
}

Table 1 : z-index:10
Plate : z-index:20
Apple : z-index:30
Table 2 : z-index:15

همونجور که میبینید table2 اولویت نمایش بیشتری داره در حالی که z-index برابر با ۱۵ داره ولی apple z-index 30 داره ، این به این دلیله که هم طبقه نیستند و در واقع بر اساس دید طبقه ای هر المنت با المنت های هم طبقه خودش مقایسه (دید ترتیبی) میشه بنابر این اولویت نمایش table با table2 مقایسه میشه
می تونیم اولویت نمایش هر المان داخل صفحه را بر اساس z-index با عددی بین صفر تا یک بیان کنیم به صورتی که هر طبقه که به اون اضافه میشه z-index اون میشه عددی بعد از ممیز برای مثال:z-index های المنت های بالا :

table : 0.10
plate : 0.1020
apple : 0.102030
table2 : 0.15

همونطور که میبینید در اینجا اولویت نمایش table از همه بیشتر شده
البته بر اساس مرحله صفر که بالا گفتم اگر z-index هم تعریف نمی کردیم ،المنت ها همینجوری که در بالا میبینیم قرار میگرفتند
البته طبق معمول باید بگم این قصه ها برای InternetExplorer 8 به بالا جوا میده و نسخه های ۶ و ۷ اعتقادی به دید طبقهای ندارند !
بیشتر بدونید …

Stacking Contexts -W3.org
The stacking context -Mozilla Developer
Z-Index And The CSS Stack – vanseodesign
What No One Told You About Z-Index – Philip Walton
The Z-Index CSS Property: A Comprehensive Look – smashingmagazine