لعنتی z-index چیه؟؟ • جاش دبلیو کومو

از آنجایی که هدر و راهنمای ابزار ما اکنون در یک زمینه قرار دارند، مقادیر z-index آنها مجذور می شود و راهنمای ابزار برنده می شود.

تمایز مهم: ما در اینجا در مورد رابطه والدین / فرزند صحبت نمی کنیم. مهم نیست که راهنمای ابزار عمیق تر از هدر تو در تو باشد. مرورگر فقط به سفارش زمینه ها اهمیت می دهد.

دیدیم که چگونه می‌توانیم با ترکیب موقعیت نسبی یا مطلق با یک زمینه نظم‌دهی ایجاد کنیم z-index، اما این تنها راه نیست! در اینجا چند مورد دیگر وجود دارد:

• راه اندازی opacity به مقدار کمتر از 1

• راه اندازی position به fixed یا sticky (برای این مقادیر به z-index نیاز نیست!)

• کاربرد a mix-blend-mode متفاوت از normal

• افزودن a z-index یک کودک در داخل a display: flex یا display: grid ظرف

• استفاده transform، filter، clip-path، یا perspective

• استفاده will-change با ارزش به عنوان opacity یا transform

• ایجاد زمینه صریح با isolation: isolate (بیشتر در این مورد به زودی!)

چندین راه دیگر وجود دارد. لیست کامل را می توانید در MDN(در برگه جدید باز می شود).

این می تواند به موقعیت های شگفت انگیزی منجر شود. ببینید اینجا چه خبر است:

style>
  header {
    position: relative;
    z-index: 2;
  }
  .tooltip {
    position: absolute;
    z-index: 999999;
  }
  main {
    position: relative;
    will-change: transform;
  }
style>
header>
  My Cool Site
header>
main>
  div class="tooltip">
    A tooltip
  div>
  p>Some main contentp>
main>

main دیگر z-index را تنظیم نمی کند بلکه استفاده می کند will-change، یک ویژگی که می تواند به تنهایی یک زمینه انباشته ایجاد کند.

برای اینکه z-index کار کند، باید تنظیم کنیم position به چیزی شبیه به آن relative یا absoluteدرست است؟

نه کاملا. ببینید اینجا چه خبر است:

style>
  .wrapper {
    display: flex;
  }
  .second.box {
    z-index: 1;
    background: hotpink;
    margin-top: 20px;
    margin-left: -20px;
    margin-right: -20px;
  }
style>
div class="wrapper">
  div class="first box">div>
  div class="second box">div>
  div class="third box">div>
div>

جعبه دوم با کمک از بالای خواهر و برادر خود بلند می شود z-index. هیچکدام وجود ندارند position هر چند اعلامیه در همه جای قطعه!

قبلاً به این فکر می کردم z-index ملک وابستگی محکمی به آن داشت position ملکی که شما وجود داشت برای تنظیم position به چیزی شبیه به آن relative یا absolute برای استفاده از آن اما این کاملا درست نیست.

در هسته خود، CSS مجموعه ای از الگوریتم های طرح بندی است. دارای Flexbox، Grid، Flow layout (پیش‌فرض) و بسیاری موارد دیگر. هر الگوریتم طرح بندی می تواند هر ویژگی CSS را هر طور که بخواهد پیاده سازی کند.

وقتی تنظیم کردیم position: relative یا position: absolute، ما به طرح بندی موقعیتی تغییر می کنیم، یک الگوریتم طرح بندی که پیاده سازی می کند z-index. اما او تنها کسی نیست که این کار را می کند! Flexbox و Grid نیز آن را پیاده سازی می کنند.

وقتی CSS را به عنوان یک کیسه بزرگ از ویژگی‌ها ندانیم و آن را به‌عنوان مجموعه‌ای از الگوریتم‌های طرح‌بندی در نظر بگیریم، زبان شروع به حس بسیار بیشتری می‌کند. شما می توانید در مورد این الگوی فکری جایگزین در مقاله من با عنوان The Importance of Learning CSS اطلاعات بیشتری کسب کنید.

اینجا یک چیز عجیب و غریب وجود دارد، و فکر می کنم ارزش آن را دارد که یک یا دو دقیقه در مورد آن فکر کنیم.

در قیاس فتوشاپ ما، تمایز واضحی بین گروه ها و لایه ها وجود دارد. همه عناصر بصری لایه‌هایی هستند و گروه‌ها را می‌توان به‌عنوان کمک‌کننده‌های ساختاری برای مهار آنها در نظر گرفت. آنها ایده های متفاوتی هستند.

با این حال، در وب، این تمایز کمی کمتر واضح است. هر عنصری که از z-index استفاده می کند باید بیش از حد یک زمینه انباشته ایجاد کنید.

زمانی که تصمیم می‌گیریم به یک عنصر z-index بدهیم، هدف ما معمولاً این است که آن عنصر را در بالا یا پایین برخی از عناصر دیگر در زمینه پشته والد بالا یا پایین بیاوریم. ما قصد نداریم برای این عنصر یک زمینه انباشته ایجاد کنیم! اما در نظر گرفتن آن مهم است.

هنگامی که یک زمینه انباشته ایجاد می شود، تمام فرزندان خود را “هم تراز” می کند. این کودکان هنوز هم می توانند در داخل سازماندهی شوند، اما ما اساسا این کودکان را قفل کرده ایم.

بیایید نگاهی دیگر به نشانه گذاری قبلی بیندازیم:

header>
  My Cool Site
header>
main>
  div class="tooltip">
    A tooltip
  div>
  p>Some main contentp>
main>

به طور پیش فرض، عناصر HTML بر اساس ترتیب DOM خود مرتب می شوند. بدون دخالت CSS، main در ارائه خواهد شد header.

می توانیم برداریم header جلو با دادن شاخص z، اما نه بدون صاف کردن همه فرزندانش. این مکانیسم منجر به خطای شد که قبلاً در مورد آن صحبت کردیم.

ما نباید فکر کنیم z-index صرفاً به عنوان راهی برای تغییر ترتیب یک عنصر. ما باید بیش از حد به آن به عنوان راهی برای تشکیل گروهی در اطراف فرزندان آن عنصر فکر کنید. z-index کار نخواهد کرد مگر اینکه یک گروه تشکیل شود.

پیوند به این عنوانانتزاعات هرمتیک با “انزوا”

یکی از ویژگی های CSS مورد علاقه من نیز یکی از مبهم ترین ها است. من می خواهم به شما معرفی کنم isolation دارایی، گوهری پنهان در زبان.

در اینجا نحوه استفاده از آن آمده است:

.wrapper {
  isolation: isolate;
}

وقتی این اعلان را به یک عنصر اعمال می کنیم، دقیقاً یک کار را انجام می دهد: یک زمینه پشته جدید ایجاد می کند.

با روش های بسیار مختلف برای ایجاد یک زمینه انباشته، چرا به یکی دیگر نیاز داریم؟ خوب، با هر روش دیگری، زمینه های انباشته شدن به طور ضمنی و در نتیجه برخی تغییرات دیگر ایجاد می شوند. isolation یک زمینه آرایه را به تمیزترین شکل ممکن ایجاد می کند:

همین است فوق العاده مفید، زیرا به ما اجازه می دهد فرزندان یک عنصر را “مهر” کنیم.

بیایید به یک مثال نگاه کنیم. من اخیراً این جزء پاکت نامه شسته و رفته را ایجاد کردم. نگه دارید یا تمرکز کنید برای دیدن باز شدن آن:

از چندین لایه تشکیل شده است:

من این افکت را در کامپوننت React قرار دادم، . چیزی شبیه این به نظر می رسد (سبک های درون خطی برای اختصار استفاده می شود):

function Envelope({ children }) {
  return (
    div>
      BackPane style={{ zIndex: 1 }} />
      Letter style={{ zIndex: 3 }}>
        {children}
      Letter>
      Shell style={{ zIndex: 4 }} />
      Flap style={{ zIndex: isOpen ? 2 : 5 }} />
    div>
  )
}

(اگر تعجب می کنید که چرا Flap دارای یک شاخص z پویا است زیرا وقتی پاکت باز می شود باید پشت حرف جابجا شود.)

یک جزء React خوب مانند لباس فضایی از محیط جدا می شود. این با این حال، لباس فضایی منقضی شده است. ببینید وقتی از آن در نزدیکی a استفاده می کنم چه اتفاقی می افتد

با z-index: 3:

مال ما کامپوننت 4 لایه را در یک div می پیچد اما یک زمینه انباشته ایجاد نمی کند. در نتیجه، این لایه‌ها می‌توانند با اجزای دیگر، مانند خسته‌کننده‌ترین بازی جهان، Twister «در هم تنیده شوند».*یک بازی مهمانی با دایره های رنگارنگ و افراد درهم..

با کمک isolation: isolate در عنصر سطح بالا در چارچوب ، ما تضمین می کنیم که به عنوان یک گروه قرار می گیرد:

در کلیپ بورد کپی کنید

function Envelope({ children }) {
  return (
    div style={{ isolation: 'isolate' }}>
      BackPane style={{ zIndex: 1 }} />
      Letter style={{ zIndex: 3 }}>
        {children}
      Letter>
      Shell style={{ zIndex: 4 }} />
      Flap style={{ zIndex: isOpen ? 2 : 5 }} />
    div>
  )
}

چرا یک زمینه انباشته به روش قدیمی ایجاد نمی کنیم، ص position: relative; z-index: 1? خوب، اجزای React طوری طراحی شده اند که قابل استفاده مجدد باشند. است 1 در واقع مقدار z-index صحیح برای آن جزء c همه شرایط؟ زیبایی از isolation این است که اجزای ما را متقاعدکننده و انعطاف پذیر نگه می دارد.

بیشتر و بیشتر، من شروع به باور کردم که z-index یک راه نجات است، شبیه به !important. این ترفندی است که به ما امکان می‌دهد بدون کشیدن اهرم بزرگ قرمز z-index، ترتیب انباشتگی را کنترل کنیم.

اگر تا به حال تلاش کرده اید که عناصر را به ترتیب درست ردیف کنید، می دانید که اشکال زدایی در زمینه انباشتگی چقدر سخت است. خوشبختانه، من چند ابزار دارم که می تواند کمک کند!

مایکروسافت اج یک «سه بعدی» جالب دارد مشاهده کنید(در برگه جدید باز می شود)” که به ما امکان می دهد زمینه های انباشته را مشاهده کنیم:

این دیدگاه می تواند کمی سخت باشد، به خصوص در برنامه های بزرگتر، اما می تواند راهی مفید برای درک زمینه های انباشته در برنامه های ما باشد.

بیایید نگاهی به ابزارهای دیگر بیندازیم:

این پسوند با فایل‌های .css و .scss کار می‌کند، اما با CSS-in-JS کار نمی‌کند.

بین همه این ابزارها، باید بتوانید چیزی را پیدا کنید که به شما در تشخیص و رفع خطاهای شاخص z کمک کند. من از افزونه کروم Andrea استفاده کرده ام و فوق العاده است!

زمینه های چیدمان نمونه خوبی از نحوه ساخت CSS بر روی “مکانیسم های پنهان” هستند. شما می‌توانید سال‌ها صرف ساخت رابط‌ها با CSS کنید بدون اینکه از وجود آنها اطلاع داشته باشید.

مگر اینکه به طور خاص برای یادگیری این مکانیسم ها وقت بگذارید، مدل ذهنی شما همیشه قطعاتی از دست خواهد داد. و اگر مدل ذهنی شما برابر است به آرامی عدم همسویی، فقط مسئله زمان است که این ناهماهنگی باعث ایجاد مشکل شود.

CSS هیچ اخطار یا پیام خطایی ندارد. هنگامی که اتفاق شگفت‌انگیزی رخ می‌دهد، هیچ «گام بعدی» واضحی برای کشف اشتباه وجود ندارد. این اختلالات ما را از جریان خارج می کند و اعتماد به نفس ما را متزلزل می کند. من فکر می کنم به همین دلیل است که بسیاری از توسعه دهندگان فرانت اند نوشتن CSS را دوست ندارند.

با این حال، هنگامی که شهودی برای زبان ایجاد کردید، CSS به یک لذت مطلق تبدیل می شود. من عشق نوشتن css این روزها

من می خواهم به توسعه دهندگان دیگر کمک کنم تا این لذت را کشف کنند. من یک دوره آموزشی آنلاین جامع ایجاد کرده‌ام که نحوه عملکرد CSS را در سطح عمیق‌تری توضیح می‌دهد و مهارت‌های عملی را که هر روز برای ساختن انواع رابط‌های کاربری استفاده می‌کنم، آموزش می‌دهد.

این “CSS برای جاوا اسکریپت” نامیده می شود توسعه دهندگان”(در برگه جدید باز می شود)، و اکنون در دسترس است. 😄

آخرین به روز رسانی از

13 سپتامبر 2024