خاصیت z-index در css
خاصیت z-index ترتیب قرارگیری عناصر HTML بر روی هم را تعیین می کند.ترتیب قرارگیری عناصر بر روی هم اشاره به موقعیت عنصر بر روی محور Z دارد(همانطور که در CSS محور X یا محور Y داریم). هرچه مقدار z-index یک عنصر بیشتر باشد به معنی رو بودن عنصر نسبت به بقیه عناصر است. این روی هم قرارگیری عناصر به صورت عمود بر روی صفحه است.
نکته: اين خاصيت فقط در زمانی کاربرد دارد که خاصيت positon عنصر بر روی مقدار relative يا absolute ویا fixed تنظيم شده باشد .
شکل کلی استفاده از این متد:
| z-index: auto|number; |
مقادیری که می توانید در این خصوصیت استفاده کنید :
auto:
در حالت auto اگر چند عنصر با یکدیگر تداخل داشته باشند، عنصری که آخر از همه در ترتیب عناصر فایل HTML وارد شده در صفحه نمایش بالاتر قرار میگیرد ( نسبت به محور z که بر صفحه نمایش عمود است) و باقی عناصر نیز به همین ترتیب گفته شده قرار خواهند گرفت ( در حالت auto عنصری که اول از همه وارد شود در زیر سایر عناصر قرار خواهد گرفت). همچنین auto حالت پیش فرض می باشد.
number:
در این حالت يک شماره منحصر به فرد برای ترتيب قرار گيری عناصری که بر روی هم هستند ، استفاده می شود که عنصر با شماره بزرگتر در بالای عنصر ديگر قرار می گيرد .
مثال:به عنوان مثال اگر ما بخواهیم عناصر به ترتیب شکل زیر بر روی هم قرار بگیرند:
| .blue{ position: relative; z-index: 1; } .red{ position:relative; z-index: 2; } .yellow {position:relative; z-index: 3; } .green {position:relative; z-index: 4; } |
