Summarize this content to 400 words in Persian Lang
این مقاله در اصل در Rails Designer منتشر شده است.
(پیشاپیش بابت عنوان عذرخواهی میکنم…)
Z-index ترتیب انباشتن عناصر را کنترل می کند تا مشخص کند کدام عناصر در چیدمان بصری در بالای عناصر دیگر ظاهر می شوند. این به شما امکان می دهد با ایجاد عمق (به معنای واقعی کلمه) UI و طرح های بصری جالبی ایجاد کنید.
اما برنامه های وب یا سایت ها را برای مدت طولانی ایجاد کنید و به زودی با مشکل z-index مواجه می شوید. در طول سال‌ها، تکنیک‌های زیادی را برای مبارزه با آن‌ها کاوش و استفاده کرده‌ام. از نقشه‌های z-index (در روزهای SCSS) تا پرتاب کردن و فقط اضافه کردن z-index: 99999. (╯°□°）╯︵ ┻━┻
بیایید به یک مثال رایج نگاه کنیم.
Sticky Nav (z-index: 10)
Z-index content (z-index: 20)
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
را محتوای Z-index “در بالای” پیمایش خواهد کرد nav عنصر
پیش نمایش مقاله اصلی را ببینید
شاید فکر کنید فقط را تغییر دهید navz-index به 30 و آن را یک روز بنامیم. اما هر دوی ما می دانیم که پایان خوبی نخواهد داشت. 😉
راه مدرن (و بسیار منطقی تر) استفاده از آن است isolation دارایی
Sticky Nav (z-index: 10)
Z-index content (z-index: 20)
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
این از Tailwind CSS استفاده می کند، اما تنها چیزی که باید بدانید این است که isolate کلاس همان است isolation: isolate;.
پیش نمایش مقاله اصلی را ببینید
هنگامی که شما در مورد isolation: isolate; موارد استفاده دیگر از آن را در برنامه های خود مشاهده می کنید.
این مقاله را برای نکات طراحی بیشتر برای توسعه دهندگان بررسی کنید.
این مقاله در اصل در Rails Designer منتشر شده است.
(پیشاپیش بابت عنوان عذرخواهی میکنم…)
Z-index ترتیب انباشتن عناصر را کنترل می کند تا مشخص کند کدام عناصر در چیدمان بصری در بالای عناصر دیگر ظاهر می شوند. این به شما امکان می دهد با ایجاد عمق (به معنای واقعی کلمه) UI و طرح های بصری جالبی ایجاد کنید.
اما برنامه های وب یا سایت ها را برای مدت طولانی ایجاد کنید و به زودی با مشکل z-index مواجه می شوید. در طول سال‌ها، تکنیک‌های زیادی را برای مبارزه با آن‌ها کاوش و استفاده کرده‌ام. از نقشه‌های z-index (در روزهای SCSS) تا پرتاب کردن و فقط اضافه کردن z-index: 99999. (╯°□°）╯︵ ┻━┻
بیایید به یک مثال رایج نگاه کنیم.
Z-index content (z-index: 20)
را محتوای Z-index “در بالای” پیمایش خواهد کرد nav عنصر
پیش نمایش مقاله اصلی را ببینید
شاید فکر کنید فقط را تغییر دهید navz-index به 30 و آن را یک روز بنامیم. اما هر دوی ما می دانیم که پایان خوبی نخواهد داشت. 😉
راه مدرن (و بسیار منطقی تر) استفاده از آن است isolation دارایی
Z-index content (z-index: 20)
این از Tailwind CSS استفاده می کند، اما تنها چیزی که باید بدانید این است که isolate کلاس همان است isolation: isolate;.
پیش نمایش مقاله اصلی را ببینید
هنگامی که شما در مورد isolation: isolate; موارد استفاده دیگر از آن را در برنامه های خود مشاهده می کنید.
این مقاله را برای نکات طراحی بیشتر برای توسعه دهندگان بررسی کنید.
