عناصر همپوشانی موقعیت با صفحات سبک آبشار
یکی از چالش های استفاده از موقعیت CSS برای طرح بندی صفحه وب این است که برخی از عناصر شما ممکن است با دیگران همپوشانی داشته باشند. این کار به خوبی انجام می شود اگر شما می خواهید آخرین عنصر در HTML باشد که در بالا قرار دارد، اما اگر نمی خواهید یا اگر می خواهید عناصری که در حال حاضر با دیگران همپوشان نداشته باشند، این کار را انجام می دهند، زیرا طراحی این چیدمان "لایه ای" ؟ برای تغییر عناصر مسیر، شما باید از ویژگی CSS استفاده کنید.
اگر از ابزار گرافیکی در ورد و پاورپوینت یا ویرایشگر تصویر قوی تر مانند Adobe Photoshop استفاده کرده اید، احتمالا شما چیزی شبیه z-index را در عمل دیده اید. در این برنامه ها، شما می توانید شی (های) که شما کشیده شده برجسته و گزینه ای را برای "ارسال به عقب" و یا "جلو به جلو" برخی از عناصر سند خود را انتخاب کنید. در فتوشاپ، این توابع را ندارید، اما شما دارای لایه "لایه" این برنامه هستید و می توانید با تنظیم مجدد این لایه ها، یک عنصر را در قسمت بوم قرار دهید. در هر دو این مثال، اساسا z-index آن اشیا را تنظیم می کنید.
z-index چیست؟
هنگامی که از موقعیت CSS برای قرار دادن عناصر در صفحه استفاده می کنید، باید به سه بعد فکر کنید. دو ابعاد استاندارد وجود دارد: چپ / راست و بالا / پایین. شاخص چپ به راست به عنوان شاخص x شناخته می شود، در حالی که از بالا به پایین، شاخص y است. این است که شما می توانید عناصر را به صورت افقی یا عمودی قرار دهید، با استفاده از این دو شاخص.
هنگامی که در طراحی وب می آید، همچنین مرتب کردن صفحه از صفحه وجود دارد. هر عنصر در صفحه می تواند در بالا یا پایین هر عنصر دیگری لایه بندی شود. خصوصیات z-index تعیین می کند که کدام پشته در هر عنصر باشد. اگر شاخص x و index y خطوط افقی و عمودی باشند، سپس z-index عمق صفحه است، اساسا بعد سوم.
من دوست دارم عناصر در یک صفحه وب را به صورت قطعه ای از کاغذ، و صفحه وب خود را به عنوان یک کولاژ، در نظر بگیرم. کجا قرار داده شده است توسط موقعیت تعیین می شود، و چه مقدار از آن توسط عناصر دیگر پوشش داده شده است z-index.
z-index یک شماره است، مثبت (مثلا 100) یا منفی (مثلا -100). z-index به طور پیش فرض 0 است. عنصر با بالاترین z-index در بالای صفحه قرار دارد و به دنبال آن بالاترین بعدی و به همین ترتیب به پایینترین z-index است. اگر دو عنصر دارای یک مقدار z-index هستند (یا تعریف نشده است، به این معنی استفاده از مقدار پیش فرض 0) مرورگر آنها را در ترتیب آنها در HTML نشان می دهد.
نحوه استفاده از z-index
هر عنصری را که می خواهید در پشته خود بدهید، یک مقدار index z مختلف بدهید. برای مثال، اگر پنج عنصر متفاوت داشته باشم:
- عنصر 1 - z-index -25
- عنصر 2 - z-index از 82
- عنصر 3 - z-index تنظیم نشده است
- عنصر 4 - z-index از 10
- عنصر 5 - z-index -3
آنها در سفارش زیر پشته می شوند:
- عنصر 2
- عنصر 4
- عنصر 3
- عنصر 5
- عنصر 1
من توصیه می کنم با استفاده از مقادیر مختلف z-index برای پشته کردن عناصر شما. به این ترتیب، اگر بعدا عناصر بیشتری را به صفحه اضافه کنید، شما باید لایه آن را بدون نیاز به تنظیم مقادیر z-index تمام عناصر دیگر بگذارید. مثلا:
- 100 برای عنصر برتر من
- 0 برای عنصر وسط من
- -100 برای عنصر پایین من
شما همچنین می توانید دو عنصر را همان مقدار z-index را بدهید. اگر این عناصر انباشته شوند، آنها به ترتیب آنها در HTML نوشته می شوند، با آخرین عنصر در بالا.
یک یادداشت برای عنصری که به طور موثر از ویژگی z-index استفاده می کند، باید یک عنصر سطح بلوک باشد یا از نمایش «بلوک» یا «inline-block» در فایل CSS شما استفاده کند.
مقاله اصلی جنیفر کریینین. ویرایش شده در تاریخ 12/09/16 توسط جرمی جیرارد.