🔥 با کمک هوش مصنوعی در کمتر از 6 ماه فول‌استک شوید ...
۰ ثانیه
۰ دقیقه
۰ ساعت
۲ استاد هادی چنگیزی
کاربرد z-index
جامعه Html & CSS ایجاد شده در ۱۰ دی ۱۴۰۱

با سلام و خسته نباشید.

میخواستم بدونم که کاربرد کلی z-index چیه؟

ممنون

درود

بعضی وقتها در طراحی پیش میاد که چند تا المان روی هم قرار بگیره. مثلا وقتی رو دکمه منو کلیک میکنید یک پنل باز میشه و لیست زیرمنوها روی پنل صفحه قرار میگیره (دیجی کالا)

از ویژگی z-index برای تعیین ترتیب عناصر در این حالت و برای وقتی که روی هم قرار می‌گیرند, استفاده میشه. یعنی z-index مشخص میکنه که المان مورد نظر رو یا زیر بقیه المانها قرار بگیره.

بهترین پاسخ
جواد رحمانیان ۱۰ دی ۱۴۰۱، ۰۵:۲۱

سلام

یک چیز دیگه ای که درمورد زد ایندکس هست که میخواستم بدونم برای مثال اگر زدایندکس رو منفی بدیم یا مثبت بدیم چه فرقی داره و اگر زدایندکس رو 1 بدیم یا 2 فرقی داره یا نه ؟

استاد هادی چنگیزی ۱۱ دی ۱۴۰۱، ۰۴:۵۴

سلام دوست عزیز

شما یه ساندویچ همبرگر رو در نظر بگیرید ? معمولا یه نون گرد زیرش هست بعد مخلفات مثل خیارشور و گوجه کاهو ... بعد برگر روی اینها هست بعد روی برگر هم پنیر و بعد دوبار نون اگر دقت کنید بصورت لایه لایه مواد روی هم قرار می‌گیرن ?

حالا اگر بخواید مثلا اول برگر باشه بعد روش کاهو مخلفات قرار بگیره چکار می‌کنید جای مواد رو عوض کنید دیگه درسته توی دنیای طراحی وب عناصر مثل تگ‌ها نقش بخش‌های مختلف ساندویچ ما رو دارن که طبق شرایطی می‌تونن لایه لایه روی هم باشن مثلا postion:absolute داشته باشن زمانی که روی هم قرار بگیرن برای جایجایی شون میایم از z-index استفاده کنیم که اگر مثبت باشه رو قرار می‌گیره اگر منفی باشه به ازای هر واحد مثلا 1px یه لایه میره زیر عنصر زیریش اگر هم واحد تعریف نکنید ینی مثلا بگید 1 یا 2 یا 1000 ینی 1 لایه نسبت به عنصر بالا یا پایین با توجه به مثبت یا منفی بودنش 2 و 1000 و هر عدد دیگه ای هم به این شکله


از این راحت‌تر و خوشمزه‌تر نمی‌تونستم براتون مثال بزنم 😉

گرسنمم شد 😅

روناک شرف ۱۱ دی ۱۴۰۱، ۱۴:۱۵