فروردین, ۱۳۹۸ بدون نظر CSS, طراحی سایت

خاصیت 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:

در این حالت یک شماره منحصر به فرد برای ترتیب قرار گیری عناصری که بر روی هم هستند ، استفاده می شود که عنصر با شماره بزرگتر در بالای عنصر دیگر قرار می گیرد .

مثال:به عنوان مثال اگر ما بخواهیم عناصر به ترتیب شکل زیر بر روی هم قرار بگیرند:

خاصیت z-index در css

.blue{
position: relative;
z-index: 1;
}
.red{
position:relative;
z-index: 2;
}
.yellow
{position:relative;
z-index: 3;
}
.green
{position:relative;
z-index: 4;
}
برچسب ها

ارسال نظر شما

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *