z-index

از ویژگی 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 پشتیبانی می شود.

 

بیشتر بخوانید

• Putting things on top of other things