راهنمای مبتدیان برای استفاده از Z-Index در CSS
به گزارش رسانه مدیاتی، اگر تا به حال برای ایجاد یک منوی پیمایشی یا هدر دائمی که جلوی سایر محتواها قرار می‌گیرد مشکل داشته‌اید، باید بر ویژگی z-index CSS تسلط داشته باشید. این ابزار ساده و در عین حال قدرتمند، ترتیب چیدمان عناصر را تعیین می‌کند و بر سلسله مراتب بصری صفحه وب شما تأثیر می‌گذارد. برای شروع کار باید به اصول و عملکرد ویژگی z-index دقت کنید و راه‌هایی را که می‌توانید آن را در پروژه وب بعدی خود بگنجانید، بررسی کنید.
CSS z-index چیست؟
ویژگی CSS z-index ترتیب قرارگیری عناصر در یک صفحه وب را مشخص می‌کند. می‌توانید از آن برای تعیین اینکه کدام عناصر در جلو یا پشت بقیه عناصر ظاهر شوند، استفاده کنید.
دسته‌ای از کاغذهای رنگی را تصور کنید که نشاندهنده عناصر مختلف در یک صفحه وب هستند. با اختصاص یک عدد، می‌توانید بر موقعیت هر کاغذ در پشت تأثیر بگذارید. هنگامی که از z-index استفاده می‌کنید، عدد کمتر به این معنی است که عنصر در پشت عناصر دیگر ظاهر می‌شود، در حالی که عدد بالاتر به این معنی است که آن عنصر در جلو قرار دارد.
اصطلاح z-index از محور z می‌آید که نشاندهنده بعد سوم در یک سیستم مختصات دکارتی سه بعدی است. محور Z، عمق جسم یا اینکه چقدر به عقب یا جلو در محدوده دید شما قرار دارد را نشان می‌دهد.
ویژگی z-index CSS چگونه کار می‌کند؟
ویژگی z-index یک روش ساده دارد که در ادامه چند نمونه از آن آورده شده است:
z-index: auto;
z-index: 10;
z-index: -2;
مقدار پیش‌فرض، خودکار یا Auto است که در بیشتر موارد با مقدار 0 برابر است. توجه داشته باشید که می‌توانید از اعداد منفی استفاده کنید که مانند اعداد مثبت رفتار می‌کنند: مقادیر پایین‌تر در پشت مقادیر بالاتر در ترتیب قرارگیری ظاهر می‌شوند.
برای استفاده از ویژگی z-index، باید نحوه عملکرد موقعیت CSS را بیاموزید. قبل از اعمال z-index به یک عنصر، باید موقعیت آن را تنظیم کنید. Z-index با هر عنصر غیر استاتیکی کار می‌کند، که این مقادیر مشترک، موقعیت آن را ایجاد می‌کنند:
ثابت (fixed)
مطلق (absolute)
نسبی (relative)
دائمی (sticky)
در زیر یک مثال ساده از z-index در عمل با استفاده از یکی از ویژگی‌های موقعیت CSS آورده شده است.
red-box, .blue-box, .green-box {
width: 200px;
height: 200px;
position: fixed;
}
.red-box {
background-color: red;
top: 50px;
left: 50px;
z-index: 3;
}
.blue-box {
background-color: blue;
top: 80px;
left: 80px;
z-index: 2;
}
.green-box {
background-color: green;
top: 110px;
left: 110px;
z-index: 1;
}
در این مثال، هر جعبه رنگی دارای یک موقعیت ثابت است که با بالا و چپ تعریف شده است. ویژگی z-index، ترتیب قرارگیری جعبه‌ها را کنترل می‌کند و مقادیر بالاتر آن، سبب می‌شود که عناصر جلوتر قرار گیرند.
مثال‌های عملی با استفاده از z-index
در اینجا چند نمونه از اجزای وب با استفاده از ویژگی‌های z-index که می‌توانید با آنها تمرین کنید، آورده شده است.
منوهای پیمایش: اگر می‌خواهید با استفاده از HTML و CSS یک منوی پیمایش ایجاد کنید، می‌توانید از z-index برای کنترل ترتیب قرارگیری منو در نوار پیمایش استفاده کنید. مطمئن شوید که منوی پیمایشی، در هنگام فعال بودن بالای سایر عناصر صفحه ظاهر می‌شود.
سرصفحه‌های استیکی: هنگام ساختن سرصفحه استیکی با CSS، می‌توانید از z-index برای ثابت ماندن آن در بالای صفحه وب در حین پیمایش کاربران استفاده کنید. این کار جداسازی واضحی بین سرصفحه و بقیه صفحه فراهم می‌کند.
آکاردئون‌ها: با استفاده از HTML و CSS برای ایجاد آکاردئون، برای کنترل ترتیب قرارگیری پانل‌ها به z-index نیاز دارید. اطمینان حاصل کنید که پانل آکاردئون فعال، بالاتر از سایرین ظاهر می‌شود و یک صفحه نمایش واضح و سازمان‌یافته از نظر بصری ایجاد می‌کند.
پنجره‌های بازشو تعاملی: با استفاده از z-index، همپوشانی‌ها یا پنجره‌های بازشو تعاملی ایجاد کنید. این کار به ویژه برای نمایش اطلاعات یا گزینه‌های اضافی بدون دور شدن از محتوای اصلی مفید است.
