از ویژگی z-index
برای تعیین ترتیب عناصر زمانی که روی هم قرار می گیرند, استفاده می شود. یعنی مشخص می کند که عنصر, رو یا زیر عنصر یا عناصر دیگر قرار بگیرد.
این ویژگی یک عدد صحیح را به عنوان مقدار می پذیرد پس اعداد مثبت, منفی و صفر قابل قبول می باشند.
z-index: 1;
z-index: 10;
z-index: -4;
z-index: 0;
فرض کنید چند عنصر روی هم قرار دارند, عنصری که z-index
بیشتری داشته باشد در ظاهر به بیننده نزدیک تر خواهد بود و عنصری که z-index
کمتری داشته باشد روی محور Z قبل از عناصر دیگر قرار می گیرد, یعنی از بیننده دورتر خواهد بود و زیر عناصر دیگر قرار خواهد گرفت.
زمانی که مرورگر در حال چیدمان عناصر در کنار هم می باشد, در مورد عناصری که روی هم قرار می گیرند نیاز دارد تا تصمیم بگیرد ترتیب آنها به چه صورت است.
در صفحات وب هر عنصر دارای یک سیستم مختصات می باشد که وقتی بحث z-index
می شود محور Z را نیز می توان برای عناصر در نظر گرفت. در تصویر زیر محور مختصات یک عنصر نگهدارنده و فرزندانش نمایش داده شده است و همچنین مشاهده می کنید که با افزایش z-index
عنصر در راستای محور Z در چشم بیننده نزدیک تر به نظر می رسد:
در حالت عادی یعنی زمانی که عناصر در flow پیشفرض قرار دارند, مرورگر عناصری که زودتر می آیند را پایین تر و عناصری که بعد از آنها قرار دارند روی آنها نمایش می دهد. اما قصه همیشه به این سادگی نیست.
زمانی که عنصری از flow عادی صفحه خارج شود, تصمیم گیری برای مرورگر کمی پیچیده تر می شود. دو روش برای تاثیر بر flow یک عنصر وجود دارد:
-
زمانی که عنصری دارای position غیر از حالت پیشفرض یا همان
static
باشد. - زمانی که عنصر دارای ویژگی float باشد.
فرض کنید در یک صفحه عناصری با انواع ویژگی ها وجود داشته باشند و قرار باشد همه آن عناصر روی هم نمایش داده شوند, در زیر ترتیب نمایش آنها آمده است. توجه داشته باشید اولین آنها به بیننده نزدیک تر و و آخرین آنها از بیننده دورتر و زیر دیگر عناصر قرار دارد:
-
عناصری که دارای مقدار
position
ی غیر ازstatic
می باشند. مثلاabsolute
,relative
و غیره. که در بین آنها نیز هر کدام در کد آخر تر باشند به بیننده نزدیک تر هستند. -
عناصر inline. (که البته
position
آنهاstatic
است) -
عناصری که float گرفته اند (که البته
position
آنهاstatic
است) و در بین آنها عنصری که در کد آخر است به بیننده نزدیک تر است. -
عناصری که نه
position
و نهfloat
دارند اما از نوع block هستند. -
عنصر ریشه یا همان
html
.
تصویر زیر این ترتیب را نیز بیان می کند. بهتر است با کلماتی که روی هر یک نوشته شده است آشنا شوید:
ترتیب بالا تا زمانی برقرار است که z-index
وارد عمل نشود. می توانید با استفاده از z-index
به راحتی ترتیب عناصر را تغییر دهید.
نکته ای که باید در نظر داشته باشید این است که:
z-index
فقط بر روی عناصری که دارای position (غیر از مقدار static
) هستند تاثیر می گذارد.
اگر بخواهیم در ترتیب گفته شده بالا, z-index
را هم وارد کنیم خواهیم داشت:
-
عناصری که دارای مقدار
position
ی غیر ازstatic
می باشند و مقدارz-index
آنها عددی مثبت است. که در بین آنها نیز هر کدام مقدار بیشتری داشته باشد به بیننده نزدیک تر است. -
عناصری که دارای مقدار
position
ی غیر ازstatic
می باشند و مقدارz-index
آنها صفر یاauto
است. -
عناصر inline. (که البته
position
آنهاstatic
است) -
عناصری که float گرفته اند (که البته
position
آنهاstatic
است) و در بین آنها عنصری که در کد آخر است به بیننده نزدیک تر است. -
عناصری که نه
position
و نهfloat
دارند اما از نوع block هستند. -
عناصری که دارای مقدار
position
ی غیر ازstatic
می باشند و مقدارz-index
آنها عددی منفی است. که در بین آنها نیز هر کدام منفی تر باشند از بیننده دورتر خواهند بود. -
عنصر ریشه یا همان
html
.
بررسی با مثال
فرض کنید سه عنصر بصورت زیر داریم که با استفاده از position
طوری مکان آنها را مشخص می کنیم که قسمتی از آنها روی هم قرار بگیرند:
<div id="first">First</div>
<div id="second">Second</div>
<div id="third">Third</div>
#first,
#second,
#third {
position: absolute;
}
همانطور که مشاهده می کنید عناصر به ترتیبی که در کد نوشته شده اند روی هم چیده شده اند.
حال فرض کنید مقدار z-index
را برای عنصر اول بصورت زیر تغییر دهیم:
#first {
z-index: 1;
}
توجه داشته باشید که چون z-index
برای دو عنصر دیگر مشخص نشده است این بدین معنی است که آنها auto
یا 0
در نظر گرفته می شوند پس مقدار 1
برای عنصر اول باعث می شود تا بالاتر از بقیه قرار بگیرد.
همینطور اگر برای عنصر دوم یک مقدار بیشتر در نظر بگیریم خواهیم داشت:
#second {
z-index: 2;
}
Stacking Context
اگر به عنصری z-index
داده شود. عناصر داخل آن از لحاظ روی هم قرار گرفتن در راستای محور Z محدود به همان عنصر خواهند شد. این بدین معنی است که اگر عنصر نگهدارنده z-index
کمتری نسبت به عنصر نگهدارنده ای دیگر داشته باشد محتوای عنصر نگهدارنده اول (یعنی فرزندان نگهدارنده) کاملا زیر عنصر نگهدارنده دیگر و محتوای آن قرار می گیرند. دیگر مهم نیست که تک تک فرزندان عنصر نگهدارنده اول z-index
بیشتری نسبت به دیگری و محتوای آن داشته باشند, مهم این است که عنصر نگهدارنده آنها z-index
کمتری نسبت به عنصر نگهدارنده دوم دارد.
برای واضح شدن مطلب گفته شده در ادامه مثال بالا فرض کنید تا فرزندی برای عنصر اول در نظر بگیریم:
<div id="first">First
<div>فرزند</div>
</div>
<div id="second">Second</div>
<div id="third">Third</div>
حال اگر z-index
فرزند عنصر اول را برابر با 1000
هم قرار دهیم بالاتر از عنصر دوم قرار نمی گیرد, چون آن فرزند محدود به پدرش شده و پدرش z-index
کمتری نسبت به عنصر دوم دارد.
بهترین راه برای درک کامل مطلب بررسی عملی آن است. در دموی زیر با تغییر مقادیر این ویژگی و همینطور با تغییر دیگر ویژگی هایی که در این مطلب بحث شد, به درک بهتر این ویژگی کمک کنید:
See the Pen z-index by Mojtaba Seyedi (@seyedi) on CodePen.
مثال دنیای واقعی
گاهی می خواهید هدر سایت یا منوی اصلی سایت را در بالای viewport ثابت کنید, در این مواقع چون می خواهید همیشه منو یا هدر روی بقیه عناصر قرار بگیرند ویژگی z-index
به کار می آید:
See the Pen fixed header using z-index by Mojtaba Seyedi (@seyedi) on CodePen.
پشتیبانی مرورگر ها
ویژگی z-index
در تمام مرورگرهای اصلی از قبیل کروم, فایرفاکس, سافاری, اپرا, اینترنت اکسپلورر, اندروید و iOS پشتیبانی می شود.
دمت گرم
Salam MAn Ye Moshekeli Pish Omade baram Nemitonam Hall Konam AGe Momken Hast idi telegrameto Be emailam emil Kon Ya Behem Pm Bede
@Ru13y
عالی بود رفیق
مرسی
بسیار عالی بود
البته جسارت نمیکنم ولی این نکته رو هم بگم که نباید به عناصر تعاملی مثل تگ a و یا افکت hover ایندکس منفی داد
ممنون از محتوایی که آموزش میدی و زحمت زیادی میکشی امیدورارم به چیزی که میخوای برسی
منم خواستم همینو بنویسم + کوکا
سلام چرا من هرچقدر تلاش میکنم نمیشه مشکل از کجاست؟ دکمه گرد توی هدر رو مشاهده کنید. z-index روش تاثیری نداره! emila.ir
سلام
برای اینکه ویژگی z-index رو به یک المان بدی حتما باید پوزیشن اون Absolute یا Relative باشه
ممنون، آقا سامان
تشکر و سپاس مهندس
سلام مهندس جان وقت بخیر
چرا ایتم های flex هم میتونن z-index بگیرن !؟ دلیل خاصی داره ؟
سلام، وقتتون بخیر
دلیل خاصی نیست همون دلیل عمومی هستش که اگر به هر دلیلی رو هم قرار گرفتند بتونید روی هم بودنشون رو مدیریت کنید، مثلا فرض کنید با مارجین منفی اومدن روی هم.
سلام، من یه پاپ آپ لایوت دارم که پوزیشنش fixed هست و اگه z-index رو براش زیاد کنم میتونه روی همهی المنتهای دیگه ظاهر بشه، حتی اگر عنصر نگه دارنده z-index کمتری نسبت به عناصر دیگر داشته باشه، آیا z-index برای المنت های fixed عملکرد جداگانه ای داره؟؟
خدا پدرتو بیامرزه نجاتم دادی.خرااااابتم
با سلام واقعا ممنونم
عالی
کامل
مفید
ممنون
سلام یه جا گنگه
سوال درست تر اینه که به غیر از position گرفتن چیز دیگه ای باعث میشه یه المنت بیاد روی چیز دیگه ؟
یعنی چی قرار باشد همه آن عناصر روی هم نمایش داده شوند ؟
نگرفتم چرا این ترتیب مهمه
عالی، بهترینید آقای سیدی :)