مفهوم ایندکس زد (z-index) چیست؟
برای اینکه با این مفهوم آشنا بشیم، اول از همه فرض کنین که می خواهیم دو تصویر رو روی یکدیگر قرار بدیم. اگر این دو تصویر اندازه های یکسان داشته باشن، با یکدیگر همپوشانی دارن و با قرار گیری رو یکدیگر، یکی از تصاویر به زیر رفته و به دلیل قرار گرفتن تصویر دوم روی اون تصویر، تصویر اول قابل مشاهده نیست.
اینجاست که ممکنه به قابلیتی نیاز داشته باشیم تا دقیقا مثل دنیای واقعی، بتونیم ترتیب قرارگیری تصاویر روی یکدیگر رو کنترل کنیم و با جابه جا کردن هر کدوم از قسمت ها ترتیب دلخواه رو ایجاد کنیم.
اگر بخواهیم چنین قابلیتی رو برای المان های موجود در صفحه پیاده سازی کنیم، باید از مفهوم ایندکس زد (z-index) استفاده کنیم.
با استفاده از این مفهوم می تونیم درست مثل نرم افزار های گرافیکی مثل فوتوشاپ، ایلستریتور و … برای المان های موجود، ترتیب و اولویت مشخصی رو نسبت به یکدیگر برای قرارگیری روی یکدیگر تعیین کنیم و به صورت لایه بندی شده و لایه لایه المان های موجود در صفحه رو لایه بندی کنیم تا زمانی که می خواهیم این المان های روی یکدیگر قرار بگیرند، برای نمایش آنها امکان اولویت بندی داشته باشیم و بتونیم بر اساس ترتیب نمایش کنترل بیشتری روی المان ها داشته باشیم.
مفهوم ایندکس زد (z-index)، یکی از مفاهیم در طراحی سایت هست که با استفاده از ویژگی (property) z-index در زبان css، می تونیم این قابلیت رو برای عناصر موجود در ساختار html ایجاد کنیم.
اگر با زبان سی اس اس (css) آشنایی ندارین، پیشنهاد می کنم که از صفحه آموزش css، با این زبان آشنا بشین.
خوشبختانه صفحه ساز المنتور، همچین قابلیتی رو در اختیارمون گذاشته تا با استفاده از قابلیت z ایندکس در المنتور، هر جا که نیاز به استفاده از این قابلیت در طراحی صفحات سایت داشتیم، با مراجعه به تب پیشرفته در قسمت تنظیمات المان مربوطه و استفاده از z ایندکس در المنتور، لایه بندی عناصر رو در طراحی خودتون داشته باشین و این امکان رو بدون نیاز به نوشتن کد سی اس اس (css) فقط با تنظیمات خود المنتور برای عناصر موجود در المنتور به وجود بیاریم.
حالا که با مفهوم ایندکس زد (z-index) آشنا شدین، می خواهیم در ادامه استفاده از این قابلیت رو در المنتور رو با هم یاد بگیریم.
اگر با مفاهیم سی اس اس(css) آشنایی دارین و برای اولین باره اسم وردپرس و المنتور رو می شنوید، پیشنهاد میکنم تا به صورت رایگان دوره آموزش وردپرس رو ببینین تا با وردپرس آشنا بشین.
قدم صفر استفاده از z ایندکس در المنتور:
برای استفاده از هر قابلیتی در المنتور، مسلما باید این صفحه ساز فوق العاده رو روی سایت ساخته شده با وردپرس رو نصب کنیم. اگر برای اولین باره که اسم المنتور رو می شنوید و میخواین با نصب و فعال سازی این افزونه آشنا بشین، پیشنهاد می کنم تا نگاهی به مقاله آموزش المنتور بندازین.
قدم اول استفاده از z ایندکس در المنتور:
برای اینکه استفاده از این قابلیت رو در المنتور یاد بگیریم، با استفاده از مثال زیر می خواهیم این مفهوم کاربردی رو یاد بگیریم. فرض کنین که دو بخش(سکشن) مثل تصویر زیر در المنتور طراحی کردیم.
فرض کنین که در بخش های بالا، بر حسب نیاز، باید المان بخش با رنگ صورتی رو کمی بالا بکشیم تا روی المان بخش با رنگ مشکی قرار بگیره. برای اینکه این کار رو انجام بدیم با استفاده از قسمت “ویرایش بخش” برای قسمت صورتی رنگ، به تب “پیشرفته” می ریم و با تنظیم مقدار منفی برای حاشیه خارجی المان(margin) این عنصر رو به بالا انتقال میدهیم تا روی بخش مشکی رنگ قرار گیرد.
بعد از اینکه مقادیر بالا رو به بخش دادیم، به دلیل عددی که در بالا وارد کردیم، المان بخش صورتی رنگ، متن موجود در بخش مشکی رنگ رو پوشش میده و کاربر دیگر امکان مشاهده متن موجود در المان مشکی رنگ رو نداره.
قدم دوم استفاده از z ایندکس در المنتور:
برای اینکه ترتیب اولویت این عناصر رو در نمایش روی یکدیگر تغییر بدهیم، باید با تغییر ایندکس z برای هر دو المان این ویژگی رو کنترل کنیم.
هدف اینه که با تنظیم یک مقدار کمتر برای المان صورتی رنگ نسبت به مقدار z-index المان مشکی رنگ، کاری کنیم که المان صورتی رنگ زیر بخش مشکی رنگ قرار بگیره و با این کار متن موجود قابل مشاهده بشه.
* توجه داشته باشین که هر چقدر عدد ایندکس z بیشتر باشه، به این معنیه که المان در لایه بالاتری قرار داره.
برای اینکار در برای هر کدوم از المان ها به تب “پیشرفته” می ریم و با استفاده از گزینه ایندکس z این مقدار رو تعیین میکنیم. برای المان صورتی رنگ مقدار 2 و برای المان مشکی رنگ مقدار 10 رو تنظیم میکنیم.
حالا اگر دوباره به ترتیب قرار گیری دو بخش توجه کنیم، می بینیم که متنی که در قسمت قبلی زیر قسمت صورتی رنگ رفته بود، دوباره قابل مشاهده شده و با کنترل این تربتیب نمایش تونستیم تا این مشکل رو حل کنیم.
استفاده از z ایندکس در المنتور برای عناصر دارای جایگاه مطلق:
مورد بعدی که ممکنه نیاز داسته باشیم تا از قابلیت z ایندکس در المنتور استفاده بکنیم، استفاده از این قابلیت هنگام استفاده از عناصر با جایگاه “مطلق” هست.
برای اینکه استفاده از این قابلیت برای مورد های این چنینی رو با هم یاد بگیریم، فرض کنیم که نیاز داریم که دو تصویر روی هم قرار بگیرن اما با توجه به طراحی نیاز داریم تا ترتیب اولویت قرار گیری اونها رو نسبت به یکدیگر کنترل کنیم.
برای اینکار اول از همه فرض کنین دو تصویر رو زیر یکدیگر در صفحه قرار می دهیم. برای اینکار تصویر دوم رو که آیکونی برای نمایش هست انتخاب می کنیم و با رفتن به تب “پیشرفته” و تنظیم گزینه “جایگاه” روی “مطلق” جایگاه این المان رو تغییر می دهیم.
بعد از اینکار، به دلیل تغییر جایگاه، تصویر مربوط به آیکون روی تصویر اول قرار می گیرد. برای اینکه به عنوان مثال این اولویت قرار گیری رو تغییر دهیم و تصویر آیکون رو زیر تصویر اول بندازیم، باید مثل قسمت قبل با تغییر ایندکس z ، این اولویت رو تغییر بدهیم. برای اینکار مقدار 3 رو برای تصویر و مقدار 2 رو برای آیکون قرار می دهیم. پس با استفاده از همون روش قسمت قبل می تونیم از z ایندکس در المنتور برای المان های با جایگاه مطلق نیز استفاده کنیم.
پس مفهوم z ایندکس در المنتور رو توی این مقاله با هم یاد گرفتیم اما اگر نیاز دارین تا مثال های بیشتری از این کاربرد ببینین پینهاد می کنم تا مقاله نوار پیشرفت دایره ای در المنتور رو ببینین. توی اون مقاله برای طراحی از این قابلیت استفاده شده.
امیدوارم که این مقاله براتون مفید بوده باشه و به صورت کامل با این قابلیت آشنا شده باشین.
