در این مقاله، در مورد این که ایندکس (z)، (z-index) چیست و چگونه می توانید از آن در المنتور استفاده کنید تا وبسایت خود را بهتر کنید صحبت خواهیم کرد. شما در قسمت پیشرفته در هنگام ویرایش هر بخش در المنتور، گزینه ایندکس (z) ، را خواهید یافت.
اما بیشتر کاربران، به خصوص کاربرانی که تجربه CSS مناسبی ندارند، نمی دانند چگونه با آن کار کنند. در این مقاله ما به شما کمک خواهیم کرد تا با نمای کلی ایندکس (z) ، و نحوه استفاده آن آشنا شوید.
نکته : برای خرید افزونه المنتور پرو اینجا کلیک کنید.
z-index چیست؟
z-index یک ویژگی در CSS است که به قسمت های مختلف در یک صفحه وب کمک می کند تا درست روی هم قرار بگیرند. وقتی ما قسمتی را با مقدار این ویژگی بزرگتر تعریف می کنیم، آن قسمت به جلو ترین لایه در صفحه تبدیل می شود و روی قسمت هایی که مقدار ایندکس z کوچکتری دارند قرار می گیرد.
به این ترتیب، می توانیم ترتیب نمایش عناصر را در صفحه کنترل کنیم و عناصری را که می خواهیم در جلو ترین قسمت صفحه نمایش داده شوند، مشخص کنیم. از ایندکس z برای تنظیم ترتیب نمایش قسمت ها در صفحه استفاده می شود. وقتی دو قسمت یکدیگر را در هم پوشانده اند، بر اساس مقدار z-index آنها المنتور تصمیم می گیرد کدام عنصر در بالا و کدام عنصر در پشت قرار گیرد.
اگر مقدار این ویژگی در یک قسمت بزرگتر از مقدار z-index قسمت دیگری باشد، آن قسمت در بالاترین لایه قرار می گیرد. مهم است که قسمت هایی که از این ویژگی استفاده می کنند، باید یک موقعیت مشخص داشته باشند، مانند موقعیت مطلق، نسبی، ثابت یا چسبیده.
نحوه ی استفاده از z-index در المنتور
برای استفاده از ایندکس z، ابتدا باید یک قسمت را که می خواهید مقدار z-index را برای آن اضافه کنید، انتخاب کنید و سپس به برگه پیشرفته بروید. در این قسمت ایندکس z را خواهید یافت که باید برای آن مقداری تعیین کنید.
وقتی از لایه های مختلف در بلوک خود استفاده می کنید، نیاز دارید به ایندکس z آن دقت کنید. این مسئله بسیار مهم است و به شما در همپوشانی های پیچیده کمک می کند. اگر از تمام ایندکس های z خود آگاه باشید، همپوشانی های پیچیده برای شما بسیار آسان خواهد بود.
کنترل z-index در یک صفحه
این ویژگی در CSS برای کنترل ترتیب عمودی قسمت هایی که هم پوشانی دارند استفاده می شود. به این صورت که با استفاده از این ویژگی می توانید تعیین کنید کدام قسمت به نظر می رسد که نزدیک تر به شما قرار دارد. اما باید به یاد داشت که این ویژگی فقط بر روی قسمت هایی تأثیر دارد که موقعیت قرارگیری (position) آنها به جز حالت ایستا (static) باشد.
