حمیدرضا سلیمیان

بلاگ شخصی حمیدرضا سلیمیان

دسته بندی مقالات
باهم در شبکه های اجتماعی !

نکاتی درباره z-index در css

نکاتی درباره z-index در css

z-index چیست ؟

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

z-index salimian.me

قبل از رفتن سراغ جزئیات z-index ، دو تا دید کلی نسبت به المان های صفحه رو بررسی میکنیم اولیش دید مفهومی یا طبقه ای و دومیش دید ترتیبی

دید طبقه ای

یک اتاقی رو فرض کنید که یک میز توی اون قرار داره ، روی میز یک بشقاب هست و روی بشقاب یک سیب r وقتی از بالا به این اتاق نگاه می کنید سیب نزدیکترین شیء به شما و بعد از اون بشقاب و میز خوب در اینجا اتاق ،میز ، بشقاب،سیب هر طبقه از مدل مفهمومی ما هستند که هر کدام داخل دیگری قرار گرفتند و اولویت نمایشی درونی ترین اونها یعنی سیب برای چشم ما بیشتره خوب حالا با در نظر گرفتن این مدل ساختار زیر رو در نظر بگیرید

 

	

دید ترتیبی

فرض کنید توی مثال بالا ما چند میز دیگر توی اتاق داشتیم یا چند بشقاب دیگر روی میز که با هم در فضای دو بعدی اشتراک مکانی داشتند اونوقت اولویت رو بر اساس 7 پارامتر زیر بدست میاد
  • 1: پس زمینه و حاشیه
  • 2: z-index منفی
  • 3: المانی با display Block
  • 4: المانی float دار !
  • 5: المانی با display inline
  • 6: z-index صفر
  • 7: z-index مثبت
برا مثال المتنی که float دار باشه اولویت نمایش بیشتر نسبت به یک المنت ساده مانند div که تو حالت پیش فرض display block داره
این 7 طبقه اولویتی که w3 معرفی کرده که به نظر من یک طبقه قبل از اینها وجود داره به نام جایگاه . که در اصل قبل از اینکه این 7 مرحله تو دید ترتیبی بررسی بشه ، جایگاه اون توی سورس بررسی میشه.در واقه در هر طبقه المانهایی های آخری(ازنظر جایگاهشون در سورس) اولویت ظاهری بیشتری دارند که من برای اینکه دستی تو اون مرحله نبرم اسمشو گذاشتم : " مرحله صفر : جایگاه "

z-index salimian.me

نقش z-index این وسط

در واقع با تعریف کردن z-index ما یک دید(ساختار) جدید را به موتور مرورگر القا کردیم ودر واقع میز جدیدی در اتاق تعریف کردیم
یک اشتباه رایج وجو داره که z-index توی حالت عادی صفره . در حالی که توی شکل بالا می بینیم که نه صفره نه منفیه در واقع بین صفر و عدد منفی 1 ، صفر منفی !

یک مثال

دید و پردازش موتور مرورگر در واقع ترکیبی است از هر دو دید طبقه ای و ترتیبی . به مثال زیر توجه کنید
#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 برابر با 15 داره ولی 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 به بالا جوا میده و نسخه های 6 و 7 اعتقادی به دید طبقهای ندارند !

بیشتر بدونید ...

نام
ایمیل
متن نظر
عبارت داخل تصویر
 
hossein
۱۳۹۳/۰۶/۱۷ ۱۷:۲۳
ممنون عالی بود
شاهین
۱۳۹۳/۰۸/۲۷ ۰۴:۰۳
خیلی کمک کردr ممنون از شما.
ohohooooo
۱۳۹۳/۱۱/۱۰ ۱۹:۵۶
tnx خیلی زیاد . . .
محمدعلی
۱۳۹۴/۰۱/۰۳ ۱۵:۰۸
واقعا امروز کمک بسیار بزرگی به من کردید ممنون
بهداد
۱۳۹۵/۰۳/۰۸ ۱۳:۴۳
عالی بود
amir
۱۳۹۵/۰۳/۱۱ ۲۲:۴۳
سلام عالی ممنون