[{"data":1,"prerenderedAt":253},["ShallowReactive",2],{"lesson:t3-s09-stacking":3,"course:taropood":57},{"meta":4,"prev":11,"next":15,"sections":19},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},true,9,"t3-s09-stacking","book",3,"فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},8,"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":16,"slug":17,"source":8,"term":9,"title_fa":18},10,"t3-s10-logical","فصل ۱۰ — logical properties",[20,24,27,32,35,38,41,44,47,50,54],{"kind":21,"heading":22,"html":23},"normal","در این فصل چه می‌سازی","\u003Ch2 id=\"در-این-فصل-چه-می‌سازی\">در این فصل چه می‌سازی\u003Ca class=\"head-anchor\" href=\"#%D8%AF%D8%B1-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84-%DA%86%D9%87-%D9%85%DB%8C%E2%80%8C%D8%B3%D8%A7%D8%B2%DB%8C\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>تا اینجا با \u003Ccode>position\u003C\u002Fcode> یاد گرفتی چیزها را روی هم بیندازی. ولی وقتی دو چیز روی هم می‌افتند، یک سؤالِ تازه پیش می‌آید: \u003Cstrong>کدام جلوتر است؟\u003C\u002Fstrong> کدام روی آن یکی می‌نشیند و کدام پشتش پنهان می‌شود؟ این فصل جوابِ همان سؤال است. و مثلِ فصلِ cascade، اینجا هم رمزِ کار این است که \u003Cstrong>حدس نزنی، بشماری\u003C\u002Fstrong> — چون این موضوع معروف‌ترین دامِ کلِ layout است: جایی که یک عددِ بزرگ‌تر می‌گذاری و باز آن چیز پشت می‌ماند، و ساعت‌ها گیج می‌شوی که چرا.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-stacking-layers.dfbac2eccd.160.webp 160w, \u002F_img\u002F01-image-stacking-layers.dfbac2eccd.320.webp 320w, \u002F_img\u002F01-image-stacking-layers.dfbac2eccd.640.webp 640w, \u002F_img\u002F01-image-stacking-layers.dfbac2eccd.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-stacking-layers.dfbac2eccd.1280.jpg\" srcset=\"\u002F_img\u002F01-image-stacking-layers.dfbac2eccd.160.jpg 160w, \u002F_img\u002F01-image-stacking-layers.dfbac2eccd.320.jpg 320w, \u002F_img\u002F01-image-stacking-layers.dfbac2eccd.640.jpg 640w, \u002F_img\u002F01-image-stacking-layers.dfbac2eccd.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"چند لایهٔ رنگی که روی هم افتاده‌اند و در عمق چیده شده‌اند، لایهٔ جلویی کاملاً روی بقیه نشسته و ترتیبِ جلو-به-عقب پیداست\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cp>آخر این فصل می‌توانی:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>با \u003Ccode>z-index\u003C\u002Fcode> تعیین کنی کدام عنصر جلوتر بنشیند\u003C\u002Fli>\n\u003Cli>بگویی چرا \u003Ccode>z-index\u003C\u002Fcode> گاهی هیچ کاری نمی‌کند\u003C\u002Fli>\n\u003Cli>یک stacking context را بشماری و از قبل بگویی کدام لایه برنده است\u003C\u002Fli>\n\u003Cli>با \u003Ccode>overflow\u003C\u002Fcode> تعیین کنی محتوایی که از جعبه بیرون می‌زند چه شود\u003C\u002Fli>\n\u003C\u002Ful>\n",{"kind":21,"heading":25,"html":26},"قبل از شروع","\u003Ch2 id=\"قبل-از-شروع\">قبل از شروع\u003Ca class=\"head-anchor\" href=\"#%D9%82%D8%A8%D9%84-%D8%A7%D8%B2-%D8%B4%D8%B1%D9%88%D8%B9\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>از فصل ۸ این ترم:\u003C\u002Fstrong> \u003Ccode>position\u003C\u002Fcode> و مقدارهایش (\u003Ccode>relative\u003C\u002Fcode>, \u003Ccode>absolute\u003C\u002Fcode>)، و اینکه یک عنصرِ positioned از جریانِ عادی جدا می‌شود و می‌تواند روی بقیه بیفتد.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل cascade (ترم ۲):\u003C\u002Fstrong> همان طرزِ فکر — وقتی چند چیز با هم می‌جنگند، مرورگر با یک قانونِ مشخص برنده را انتخاب می‌کند، و تو می‌توانی از قبل بشماری‌اش.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>فقط یک مرورگر لازم داری، یا همین آزمایشگاه.\u003C\u002Fp>\n",{"kind":28,"heading":29,"html":30,"embed":31},"lab","","— چند جعبه می‌بینی که روی هم افتاده‌اند. در این فصل قبل از هر تغییر حدس می‌زنی کدام جلوتر می‌نشیند، بعد چک می‌کنی؛ و یک بار هم به داری برمی‌خوری که عددِ بزرگ کار نمی‌کند","\u002Flab\u002Fembed\u002Ftaropood\u002Fterm-3-layout\u002Fsession-09-stacking",{"kind":21,"heading":33,"html":34},"۱. وقتی دو چیز روی هم می‌افتند","\u003Ch2 id=\"۱-وقتی-دو-چیز-روی-هم-می‌افتند\">۱. وقتی دو چیز روی هم می‌افتند\u003Ca class=\"head-anchor\" href=\"#%DB%B1-%D9%88%D9%82%D8%AA%DB%8C-%D8%AF%D9%88-%DA%86%DB%8C%D8%B2-%D8%B1%D9%88%DB%8C-%D9%87%D9%85-%D9%85%DB%8C%E2%80%8C%D8%A7%D9%81%D8%AA%D9%86%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>از فصل ۸ یادت هست که یک عنصرِ \u003Ccode>position: absolute\u003C\u002Fcode> از جریان بیرون می‌آید و می‌تواند روی عنصرِ دیگری بیفتد. در آزمایشگاه دو جعبه داریم که همین‌طورند — A و B که هر دو absolute اند و هم‌پوشانی دارند:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.box {\n  position: absolute;\n  width: 120px;\n  height: 120px;\n  padding: 10px;\n  color: #ffffff;\n  font-weight: 700;\n}\n\n.box-a {\n  top: 0;\n  right: 0;\n  background-color: #2a6b93;\n}\n\n.box-b {\n  top: 30px;\n  right: 60px;\n  background-color: #bc3e1c;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>به صفحه نگاه کن: جعبهٔ B (قرمز) روی جعبهٔ A (آبی) نشسته. هیچ‌جا نگفتیم کدام جلو باشد، پس مرورگر یک قانونِ ساده دارد: \u003Cstrong>وقتی هیچ دستوری ندادی، هرچه در HTML دیرتر آمده جلوتر می‌نشیند.\u003C\u002Fstrong> B بعد از A نوشته شده، پس B جلوست. همان منطقِ «دیرتر برنده است» که در cascade دیدی، این‌بار برای لایه‌ها.\u003C\u002Fp>\n\u003Cp>قبل از ادامه، جواب بده: اگر در HTML جای A و B را عوض کنی (اول B، بعد A)، کدام جلو می‌آید؟\u003C\u002Fp>\n\u003Chr>\n\u003Cp>\u003Cstrong>جواب:\u003C\u002Fstrong> A. چون حالا A دیرتر نوشته شده. تا وقتی هیچ z-index ای در کار نباشد، فقط ترتیبِ نوشتن تصمیم می‌گیرد.\u003C\u002Fp>\n",{"kind":21,"heading":36,"html":37},"۲. z-index: خودت ترتیب را تعیین کن","\u003Ch2 id=\"۲-z-index-خودت-ترتیب-را-تعیین-کن\">۲. z-index: خودت ترتیب را تعیین کن\u003Ca class=\"head-anchor\" href=\"#%DB%B2-z-index-%D8%AE%D9%88%D8%AF%D8%AA-%D8%AA%D8%B1%D8%AA%DB%8C%D8%A8-%D8%B1%D8%A7-%D8%AA%D8%B9%DB%8C%DB%8C%D9%86-%DA%A9%D9%86\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>نمی‌خواهیم اسیرِ ترتیبِ نوشتن باشیم. property ‌ای هست به‌نامِ \u003Ccode>z-index\u003C\u002Fcode> که با یک عدد می‌گوید هر عنصر چقدر جلو باشد: \u003Cstrong>عددِ بزرگ‌تر، جلوتر.\u003C\u002Fstrong> بیا A را — با اینکه اول نوشته شده — بیاوریم جلو. به \u003Ccode>.box-a\u003C\u002Fcode> یک \u003Ccode>z-index\u003C\u002Fcode> بده:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.box-a {\n  top: 0;\n  right: 0;\n  background-color: #2a6b93;\n  z-index: 1;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> حالا جعبهٔ A (آبی) آمد جلو و روی B نشست — با اینکه در HTML اول نوشته شده. عددِ \u003Ccode>1\u003C\u002Fcode> از پیش‌فرضِ B (که z-index ندارد و مثلِ صفر حساب می‌شود) بزرگ‌تر است، پس A بُرد. ترتیبِ نوشتن دیگر حرفِ آخر را نزد؛ \u003Ccode>z-index\u003C\u002Fcode> زد.\u003C\u002Fp>\n\u003Cp>ولی یک شرطِ مهم هست که خیلی‌ها رویش می‌لغزند: \u003Cstrong>\u003Ccode>z-index\u003C\u002Fcode> فقط روی عنصری کار می‌کند که positioned باشد\u003C\u002Fstrong> — یعنی \u003Ccode>position\u003C\u002Fcode> اش چیزی غیر از \u003Ccode>static\u003C\u002Fcode>ِ پیش‌فرض باشد (\u003Ccode>relative\u003C\u002Fcode>, \u003Ccode>absolute\u003C\u002Fcode>, \u003Ccode>fixed\u003C\u002Fcode>, \u003Ccode>sticky\u003C\u002Fcode>). روی یک عنصرِ معمولیِ static، هر \u003Ccode>z-index\u003C\u002Fcode> ای بگذاری بی‌اثر است. جعبه‌های ما \u003Ccode>absolute\u003C\u002Fcode> اند، برای همین \u003Ccode>z-index\u003C\u002Fcode> رویشان کار کرد.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> لازم نیست عددها پشتِ‌سرِ هم باشند (۱، ۲، ۳). خیلی‌ها فاصله می‌گذارند (۱۰، ۲۰، ۳۰) تا بعداً بشود چیزی را وسطشان جا داد. فقط بزرگی و کوچکی‌شان مهم است، نه فاصله‌شان.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>قبل از ادامه، جواب بده: یک عنصرِ \u003Ccode><div>\u003C\u002Fcode>ِ معمولی (بدونِ \u003Ccode>position\u003C\u002Fcode>) داری و بهش \u003Ccode>z-index: 999\u003C\u002Fcode> می‌دهی. جلو می‌آید؟\u003C\u002Fp>\n\u003Chr>\n\u003Cp>\u003Cstrong>جواب:\u003C\u002Fstrong> نه. \u003Ccode>z-index\u003C\u002Fcode> روی عنصری که positioned نیست هیچ کاری نمی‌کند. اول باید \u003Ccode>position\u003C\u002Fcode> اش را عوض کنی (مثلاً \u003Ccode>relative\u003C\u002Fcode>)، بعد \u003Ccode>z-index\u003C\u002Fcode> معنا پیدا می‌کند. این خودش اولین جای رایجِ «z-index کار نمی‌کند» است.\u003C\u002Fp>\n",{"kind":21,"heading":39,"html":40},"۳. دامِ اصلی: stacking context","\u003Ch2 id=\"۳-دامِ-اصلی-stacking-context\">۳. دامِ اصلی: stacking context\u003Ca class=\"head-anchor\" href=\"#%DB%B3-%D8%AF%D8%A7%D9%85%D9%90-%D8%A7%D8%B5%D9%84%DB%8C-stacking-context\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>حالا می‌رسیم به قلبِ این فصل — همان جایی که عددِ بزرگ کار نمی‌کند و همه گیج می‌شوند. در آزمایشگاه یک کارت داریم که یک \u003Ccode>badge\u003C\u002Fcode> (نشانِ گوشه) روی گوشهٔ بالای‌اش نشسته، و یک \u003Ccode>ribbon\u003C\u002Fcode> (نوارِ اعلان) که از روی همان گوشه رد می‌شود و درست روی badge می‌افتد. عمداً به badge یک عددِ خیلی بزرگ داده‌ایم و به ribbon یک عددِ کوچک:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.card {\n  position: absolute;\n  z-index: 1;\n}\n\n.badge {\n  position: absolute;\n  z-index: 9999;\n}\n\n.ribbon {\n  position: absolute;\n  z-index: 2;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>منطقی است فکر کنی badge با \u003Ccode>9999\u003C\u002Fcode> باید روی همه‌چیز بنشیند — از ribbon که فقط \u003Ccode>2\u003C\u002Fcode> دارد که خیلی بزرگ‌تر است. ولی به صفحه نگاه کن: \u003Cstrong>ribbon روی badge افتاده.\u003C\u002Fstrong> آن \u003Ccode>9999\u003C\u002Fcode> انگار اصلاً دیده نشد.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> عددِ بزرگ را دیدی و باز عنصر پشت ماند؟ اینجا هیچ عددی را بزرگ‌تر نکن — این دام با زیاد کردنِ عدد بدتر می‌شود، نه بهتر. مشکل جای دیگری است: badge داخلِ card است، و card خودش یک \u003Ccode>z-index\u003C\u002Fcode> دارد (\u003Ccode>1\u003C\u002Fcode>). وقتی یک عنصرِ positioned یک \u003Ccode>z-index\u003C\u002Fcode> می‌گیرد، دورِ فرزندانش یک \u003Cstrong>stacking context\u003C\u002Fstrong> می‌سازد — یک جعبهٔ دربسته که عددهای داخلش فقط \u003Cstrong>نسبت به هم\u003C\u002Fstrong> معنا دارند، نه نسبت به دنیای بیرون. پس \u003Ccode>9999\u003C\u002Fcode>ِ badge فقط می‌گوید «داخلِ card از همه جلوترم»، نه «از کلِ صفحه جلوترم». وقتی می‌خواهی card را با چیزهای بیرون بسنجی، عددی که مهم است \u003Ccode>z-index\u003C\u002Fcode>ِ خودِ card است (\u003Ccode>1\u003C\u002Fcode>)، نه \u003Ccode>9999\u003C\u002Fcode>ِ بچه‌اش. و \u003Ccode>1\u003C\u002Fcode> از \u003Ccode>2\u003C\u002Fcode>ِ ribbon کوچک‌تر است — پس کلِ card، با هر چه رویش هست، می‌رود پشتِ ribbon.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>بیایید مثلِ cascade \u003Cstrong>بشماریم\u003C\u002Fstrong>. سه لایهٔ بیرونی داریم که مستقیماً با هم مقایسه می‌شوند:\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>عنصر\u003C\u002Fth>\n\u003Cth>context اش کجاست\u003C\u002Fth>\n\u003Cth>عددی که در آن context حساب می‌شود\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>\u003Ccode>card\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>صفحهٔ اصلی\u003C\u002Ftd>\n\u003Ctd>1\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>ribbon\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>صفحهٔ اصلی\u003C\u002Ftd>\n\u003Ctd>2\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>badge\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>داخلِ context ِ \u003Ccode>card\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>9999 (ولی فقط داخلِ card)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>در صفحهٔ اصلی، فقط \u003Ccode>card\u003C\u002Fcode> (با ۱) و \u003Ccode>ribbon\u003C\u002Fcode> (با ۲) رو‌در‌روی هم‌اند؛ \u003Ccode>ribbon\u003C\u002Fcode> می‌بَرد و جلو می‌نشیند. \u003Ccode>badge\u003C\u002Fcode> اصلاً واردِ این مقایسه نمی‌شود، چون در یک جعبهٔ دیگر زندگی می‌کند. \u003Ccode>9999\u003C\u002Fcode> عددِ بزرگی است، ولی در یک اتاقِ اشتباه فریاد می‌زند.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F02-image-context-trap.f41f8ce0fc.160.webp 160w, \u002F_img\u002F02-image-context-trap.f41f8ce0fc.320.webp 320w, \u002F_img\u002F02-image-context-trap.f41f8ce0fc.640.webp 640w, \u002F_img\u002F02-image-context-trap.f41f8ce0fc.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F02-image-context-trap.f41f8ce0fc.1280.jpg\" srcset=\"\u002F_img\u002F02-image-context-trap.f41f8ce0fc.160.jpg 160w, \u002F_img\u002F02-image-context-trap.f41f8ce0fc.320.jpg 320w, \u002F_img\u002F02-image-context-trap.f41f8ce0fc.640.jpg 640w, \u002F_img\u002F02-image-context-trap.f41f8ce0fc.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"یک قابِ بزرگ که داخلش یک کارتِ کوچک با یک ستونِ بلند از نقطه‌ها (عددِ بزرگ) نشسته، ولی یک کارتِ بیرونی با ستونِ کوتاه‌ترِ نقطه‌ها جلوترِ آن قاب افتاده — نشان می‌دهد عددِ بزرگِ داخلِ قاب به بیرونش کاری ندارد\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cp>پس چطور درستش کنیم؟ نه با دست‌بردن به badge. باید \u003Ccode>z-index\u003C\u002Fcode>ِ خودِ \u003Cstrong>card\u003C\u002Fstrong> را از \u003Ccode>2\u003C\u002Fcode>ِ ribbon بزرگ‌تر کنیم تا کلِ کارت (و همراهش badge) بیاید جلو:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.card {\n  position: absolute;\n  z-index: 3;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> حالا کارت و badge اش با هم آمدند روی ribbon. مشکل را با فهمیدنِ context حل کردی، نه با بزرگ‌تر کردنِ یک عددِ بی‌فایده. این همان درسِ فصل است: وقتی \u003Ccode>z-index\u003C\u002Fcode> کار نمی‌کند، عدد را زیاد نکن — \u003Cstrong>بشمار\u003C\u002Fstrong> ببین هر عنصر در کدام context است.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>⚠️ \u003Cstrong>مواظب باش:\u003C\u002Fstrong> فقط \u003Ccode>z-index\u003C\u002Fcode> نیست که stacking context می‌سازد. چند property ِ دیگر هم بی‌سروصدا همین کار را می‌کنند — مهم‌ترینشان \u003Ccode>opacity\u003C\u002Fcode> ِ کمتر از ۱ و \u003Ccode>transform\u003C\u002Fcode> (که در ترم ۵ می‌بینی). برای همین گاهی یک عنصر پشت می‌ماند و تو اصلاً \u003Ccode>z-index\u003C\u002Fcode> ای در کار نمی‌بینی که مقصر باشد؛ مقصر یک \u003Ccode>opacity: 0.9\u003C\u002Fcode>ِ روی والد است که یک context ِ تازه ساخته. اولین سؤال همیشه این باشد: «این عنصر داخلِ context ِ کیست؟»\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":42,"html":43},"۴. overflow: وقتی محتوا از جعبه بیرون می‌زند","\u003Ch2 id=\"۴-overflow-وقتی-محتوا-از-جعبه-بیرون-می‌زند\">۴. overflow: وقتی محتوا از جعبه بیرون می‌زند\u003Ca class=\"head-anchor\" href=\"#%DB%B4-overflow-%D9%88%D9%82%D8%AA%DB%8C-%D9%85%D8%AD%D8%AA%D9%88%D8%A7-%D8%A7%D8%B2-%D8%AC%D8%B9%D8%A8%D9%87-%D8%A8%DB%8C%D8%B1%D9%88%D9%86-%D9%85%DB%8C%E2%80%8C%D8%B2%D9%86%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>یک موضوعِ دیگر که به چیدمان و لایه‌ها مربوط است: چه می‌شود وقتی محتوا از اندازهٔ جعبه‌اش بزرگ‌تر است؟ در آزمایشگاه یک جعبه داریم که قدِ ثابتِ \u003Ccode>90px\u003C\u002Fcode> دارد ولی متنش بلندتر است:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.frame {\n  height: 90px;\n  padding: 12px;\n  background-color: #cfe3f3;\n  overflow: visible;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>با \u003Ccode>overflow: visible\u003C\u002Fcode> — که مقدارِ پیش‌فرض است — متن از پایینِ جعبه \u003Cstrong>بیرون می‌زند\u003C\u002Fstrong> و روی چیزهای زیرش می‌ریزد. جعبه قدش \u003Ccode>90px\u003C\u002Fcode> مانده، ولی محتوا به مرزش اعتنا نکرده. \u003Ccode>overflow\u003C\u002Fcode> همین را کنترل می‌کند: با محتوایی که جا نمی‌شود چه کند. چهار مقدارِ اصلی دارد:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode>visible\u003C\u002Fcode> — پیش‌فرض؛ محتوا بیرون می‌زند و دیده می‌شود.\u003C\u002Fli>\n\u003Cli>\u003Ccode>hidden\u003C\u002Fcode> — هرچه از مرز بیرون بزند \u003Cstrong>بریده\u003C\u002Fstrong> می‌شود و دیگر دیده نمی‌شود.\u003C\u002Fli>\n\u003Cli>\u003Ccode>scroll\u003C\u002Fcode> — محتوا داخل می‌ماند و همیشه یک نوارِ پیمایش (scrollbar) می‌گذارد.\u003C\u002Fli>\n\u003Cli>\u003Ccode>auto\u003C\u002Fcode> — مثلِ \u003Ccode>scroll\u003C\u002Fcode>، ولی نوارِ پیمایش فقط وقتی می‌آید که واقعاً لازم باشد.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>بیا \u003Ccode>auto\u003C\u002Fcode> را امتحان کنیم که پرکاربردترین است:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.frame {\n  height: 90px;\n  padding: 12px;\n  background-color: #cfe3f3;\n  overflow: auto;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> حالا متن دیگر بیرون نمی‌زند؛ داخلِ جعبه می‌ماند و یک نوارِ پیمایشِ کوچک کنارش آمده که می‌توانی متن را بالا-پایین کنی. مقدار را به \u003Ccode>hidden\u003C\u002Fcode> عوض کن و ببین نوار می‌رود و ته‌متن \u003Cstrong>بریده\u003C\u002Fstrong> می‌شود؛ به \u003Ccode>visible\u003C\u002Fcode> برگردان و ببین دوباره بیرون می‌ریزد. یک property، چهار رفتار.\u003C\u002Fp>\n\u003Cp>قبل از ادامه، جواب بده: می‌خواهی محتوای اضافه دیده نشود ولی نوارِ پیمایش هم \u003Cstrong>نیاید\u003C\u002Fstrong>. کدام مقدار؟\u003C\u002Fp>\n\u003Chr>\n\u003Cp>\u003Cstrong>جواب:\u003C\u002Fstrong> \u003Ccode>hidden\u003C\u002Fcode>. محتوای بیرون‌زده را می‌بُرد و هیچ نواری نمی‌گذارد. (\u003Ccode>auto\u003C\u002Fcode> هم پنهانش می‌کند ولی نوارِ پیمایش می‌آورد تا بشود دیدش.)\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>⚠️ \u003Cstrong>مواظب باش:\u003C\u002Fstrong> \u003Ccode>overflow: hidden\u003C\u002Fcode> روی یک والد، هر چیزی را که از مرزِ آن والد بیرون بزند می‌بُرد — حتی یک عنصرِ positioned که عمداً بیرون گذاشته‌ای، یا یک \u003Ccode>sticky\u003C\u002Fcode> که می‌خواهد بچسبد. اگر یک روز چیزی که باید بیرونِ جعبه دیده شود ناپدید شد، یک \u003Ccode>overflow: hidden\u003C\u002Fcode>ِ روی یکی از والدها را مظنون بدان.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":45,"html":46},"کد کاملِ این فصل","\u003Ch2 id=\"کد-کاملِ-این-فصل\">کد کاملِ این فصل\u003Ca class=\"head-anchor\" href=\"#%DA%A9%D8%AF-%DA%A9%D8%A7%D9%85%D9%84%D9%90-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>این هم دو فایلِ کامل. اول \u003Ccode>index.html\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><!-- index.html -->\n<!DOCTYPE html>\n<html lang="fa" dir="rtl">\n  <head>\n    <meta charset="UTF-8">\n    <title>z-index و لایه‌ها<\u002Ftitle>\n    <link rel="stylesheet" href="styles.css">\n  <\u002Fhead>\n  <body>\n    <section class="stage">\n      <div class="box box-a">A<\u002Fdiv>\n      <div class="box box-b">B<\u002Fdiv>\n    <\u002Fsection>\n\n    <section class="panel">\n      <article class="card">\n        <span class="badge">تازه<\u002Fspan>\n        <p>کارت پروفایل<\u002Fp>\n      <\u002Farticle>\n      <div class="ribbon">نوار اعلان<\u002Fdiv>\n    <\u002Fsection>\n\n    <section class="frame">\n      <p>این جعبه قدِ ثابتی دارد ولی متنش بلند است، پس متن از پایین بیرون می‌زند. خطِ دوم اینجاست. خطِ سوم هم می‌آید. خطِ چهارم، تا از مرزِ جعبه رد شود و ببینی سرریز چطور رفتار می‌کند.<\u002Fp>\n    <\u002Fsection>\n  <\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>و \u003Ccode>styles.css\u003C\u002Fcode> — در حالتِ درستش، با \u003Ccode>z-index\u003C\u002Fcode>ِ card که مشکلِ بخش ۳ را حل کرده و \u003Ccode>overflow: auto\u003C\u002Fcode>ِ بخش ۴:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>\u002F* styles.css *\u002F\n* {\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: Tahoma, sans-serif;\n  background-color: #f6edda;\n  color: #2c2114;\n  padding: 24px;\n}\n\n.stage {\n  position: relative;\n  height: 160px;\n  margin-bottom: 32px;\n}\n\n.box {\n  position: absolute;\n  width: 120px;\n  height: 120px;\n  padding: 10px;\n  color: #ffffff;\n  font-weight: 700;\n}\n\n.box-a {\n  top: 0;\n  right: 0;\n  background-color: #2a6b93;\n  z-index: 1;\n}\n\n.box-b {\n  top: 30px;\n  right: 60px;\n  background-color: #bc3e1c;\n}\n\n.panel {\n  position: relative;\n  height: 190px;\n  margin-bottom: 32px;\n}\n\n.card {\n  position: absolute;\n  top: 30px;\n  right: 40px;\n  width: 200px;\n  height: 120px;\n  padding: 12px;\n  background-color: #ffffff;\n  border: 2px solid #2c2114;\n  z-index: 3;\n}\n\n.badge {\n  position: absolute;\n  top: -14px;\n  right: -14px;\n  padding: 4px 10px;\n  background-color: #55731b;\n  color: #ffffff;\n  border-radius: 999px;\n  z-index: 9999;\n}\n\n.ribbon {\n  position: absolute;\n  top: 10px;\n  right: 0;\n  width: 260px;\n  padding: 10px;\n  background-color: #a36207;\n  color: #ffffff;\n  z-index: 2;\n}\n\n.frame {\n  height: 90px;\n  padding: 12px;\n  background-color: #cfe3f3;\n  overflow: auto;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> یک صفحه بساز که یک منو یا کارت پشتِ چیزِ دیگری گیر کرده و از دستیار AI ات بپرس «چرا \u003Ccode>z-index\u003C\u002Fcode>ِ من کار نمی‌کند؟». خیلی وقت‌ها اولین جوابش این است: «عددِ \u003Ccode>z-index\u003C\u002Fcode> را بزرگ‌تر کن». این دقیقاً همان \u003Cstrong>«AI هم اشتباه می‌کند»\u003C\u002Fstrong> است — جوابی که مشکل را حل نمی‌کند و تو را عمیق‌ترِ همان دام می‌برد. به‌جایش بپرس «کدام والدِ این عنصر یک stacking context ساخته؟» و خودت در DevTools والدها را نگاه کن و context ها را بشمار. کمک‌گرفتن برای فهمیدن، نه برای بزرگ‌تر کردنِ کورکورانهٔ یک عدد.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":48,"html":49},"واژه‌های تازهٔ این فصل","\u003Ch2 id=\"واژه‌های-تازهٔ-این-فصل\">واژه‌های تازهٔ این فصل\u003Ca class=\"head-anchor\" href=\"#%D9%88%D8%A7%DA%98%D9%87%E2%80%8C%D9%87%D8%A7%DB%8C-%D8%AA%D8%A7%D8%B2%D9%87%D9%94-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>کلمه\u003C\u002Fth>\n\u003Cth>تلفظ به حروف فارسی\u003C\u002Fth>\n\u003Cth>یعنی چه\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>z-index\u003C\u002Ftd>\n\u003Ctd>زِد-ایندِکس\u003C\u002Ftd>\n\u003Ctd>عددی که تعیین می‌کند یک عنصرِ positioned چقدر جلو بنشیند؛ بزرگ‌تر یعنی جلوتر\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>stacking context\u003C\u002Ftd>\n\u003Ctd>اِستَکینگ کانتِکست\u003C\u002Ftd>\n\u003Ctd>جعبهٔ دربستهٔ لایه‌بندی؛ \u003Ccode>z-index\u003C\u002Fcode>های داخلش فقط نسبت به هم معنا دارند، نه نسبت به بیرون\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>positioned\u003C\u002Ftd>\n\u003Ctd>پوزیشِند\u003C\u002Ftd>\n\u003Ctd>عنصری که \u003Ccode>position\u003C\u002Fcode> اش static نیست؛ فقط این‌ها \u003Ccode>z-index\u003C\u002Fcode> می‌پذیرند\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>overflow\u003C\u002Ftd>\n\u003Ctd>اورفلو\u003C\u002Ftd>\n\u003Ctd>تعیین می‌کند محتوایی که از مرزِ جعبه بیرون می‌زند چه شود\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>scrollbar\u003C\u002Ftd>\n\u003Ctd>اِسکرول‌بار\u003C\u002Ftd>\n\u003Ctd>نوارِ پیمایش که می‌گذارد محتوای جا‌نشده را بالا-پایین کنی\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n",{"kind":51,"heading":52,"html":53},"checkpoint","تمرین‌ها","\u003Ch2 id=\"تمرین‌ها\">تمرین‌ها\u003Ca class=\"head-anchor\" href=\"#%D8%AA%D9%85%D8%B1%DB%8C%D9%86%E2%80%8C%D9%87%D8%A7\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>قبل از تمرین، بدون نگاه‌کردن به بالا جواب بده: دو دلیلِ رایج که «z-index کار نمی‌کند» چیست؟ (یکی مربوط به \u003Ccode>position\u003C\u002Fcode>، یکی مربوط به context.)\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین اجباری:\u003C\u002Fstrong> سه جعبهٔ absolute بساز که روی هم بیفتند. با \u003Ccode>z-index\u003C\u002Fcode> کاری کن جعبهٔ \u003Cstrong>وسطی\u003C\u002Fstrong> (که در HTML وسط نوشته شده) بیاید کاملاً جلو و بعد جعبهٔ اول، و آخر از همه جعبهٔ سوم پشت بماند. قبل از دیدن، روی کاغذ بنویس به هرکدام چه عددی می‌دهی و چرا.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> دامِ stacking context را با دستِ خودت بساز. یک والدِ \u003Ccode>position: relative; z-index: 1\u003C\u002Fcode> بگذار و داخلش یک فرزندِ absolute با \u003Ccode>z-index: 9999\u003C\u002Fcode>. کنارِ والد، یک عنصرِ دیگر با \u003Ccode>z-index: 2\u003C\u002Fcode> بگذار که روی فرزند بیفتد. ببین \u003Ccode>9999\u003C\u002Fcode> شکست می‌خورد. حالا \u003Cstrong>بدونِ\u003C\u002Fstrong> دست‌زدن به \u003Ccode>9999\u003C\u002Fcode>، فقط با عوض‌کردنِ \u003Ccode>z-index\u003C\u002Fcode>ِ والد، فرزند را بیاور جلو — و بنویس چرا این جواب می‌دهد ولی زیاد کردنِ \u003Ccode>9999\u003C\u002Fcode> جواب نمی‌داد.\u003C\u002Fp>\n",{"kind":21,"heading":55,"html":56},"در فصل بعد","\u003Ch2 id=\"در-فصل-بعد\">در فصل بعد\u003Ca class=\"head-anchor\" href=\"#%D8%AF%D8%B1-%D9%81%D8%B5%D9%84-%D8%A8%D8%B9%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>الان می‌دانی لایه‌ها چطور روی هم می‌نشینند و چرا \u003Ccode>z-index\u003C\u002Fcode> گاهی کار نمی‌کند — نه با حدس، با شمردنِ context. یک نکتهٔ کوچک را هم دیدی: در همهٔ کدهای این فصل از \u003Ccode>top\u003C\u002Fcode> و \u003Ccode>right\u003C\u002Fcode> استفاده کردیم. ولی صفحهٔ ما راست‌به‌چپ است؛ آیا \u003Ccode>right\u003C\u002Fcode> همیشه انتخابِ درستی است، یا اگر یک روز صفحه چپ‌به‌راست شود خراب می‌شود؟ فصل بعد سراغِ همین می‌رویم: \u003Cstrong>logical properties\u003C\u002Fstrong> — راهی که به‌جای «چپ» و «راست»، به «شروع» و «پایانِ» خط فکر می‌کند و خودش با جهتِ صفحه هماهنگ می‌شود.\u003C\u002Fp>\n",{"course":58,"entitled":66,"lessons":67,"payments_enabled":66,"terms":252,"live":5},{"active_window":59,"effective_price_toman":60,"free":5,"lesson_count":61,"price_toman":62,"slug":63,"summary_fa":64,"title_fa":65},null,0,61,1500000,"taropood","از صفر تا ساختن سایت واقعی با HTML و CSS. متن‌محور، با آزمایشگاه زندهٔ داخل مرورگر و اصطلاح‌های اصیل.","تاروپود — خودآموز HTML و CSS",false,[68,72,76,79,83,87,91,95,98,101,104,107,110,113,116,119,122,125,128,131,134,138,141,144,147,150,153,156,159,160,161,162,165,168,171,174,177,180,183,186,189,192,195,198,201,204,207,210,213,216,219,222,225,228,231,234,237,240,243,246,249],{"free_preview":5,"order":69,"slug":70,"source":8,"term":69,"title_fa":71},1,"t1-s01-first-page","فصل ۰۱ — اولین صفحهٔ وب تو",{"free_preview":5,"order":73,"slug":74,"source":8,"term":69,"title_fa":75},2,"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":9,"slug":77,"source":8,"term":69,"title_fa":78},"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":80,"slug":81,"source":8,"term":69,"title_fa":82},4,"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":84,"slug":85,"source":8,"term":69,"title_fa":86},5,"t1-s05-lists","فصل ۰۵ — فهرست",{"free_preview":5,"order":88,"slug":89,"source":8,"term":69,"title_fa":90},6,"t1-s06-semantic","فصل ۰۶ — اسکلت معنادار صفحه",{"free_preview":5,"order":92,"slug":93,"source":8,"term":69,"title_fa":94},7,"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",{"free_preview":5,"order":12,"slug":96,"source":8,"term":69,"title_fa":97},"t1-s08-forms","فصل ۰۸ — فرم: گرفتن ورودی",{"free_preview":5,"order":6,"slug":99,"source":8,"term":69,"title_fa":100},"t1-s09-accessibility","فصل ۰۹ — دسترس‌پذیری از همان HTML",{"free_preview":5,"order":16,"slug":102,"source":8,"term":69,"title_fa":103},"t1-s10-first-project","فصل ۱۰ — پروژه: صفحهٔ معرفی خودت",{"free_preview":5,"order":69,"slug":105,"source":8,"term":73,"title_fa":106},"t2-s01-first-css","فصل ۰۱ — اولین CSS",{"free_preview":5,"order":73,"slug":108,"source":8,"term":73,"title_fa":109},"t2-s02-selectors","فصل ۰۲ — selector ها",{"free_preview":5,"order":9,"slug":111,"source":8,"term":73,"title_fa":112},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":80,"slug":114,"source":8,"term":73,"title_fa":115},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":84,"slug":117,"source":8,"term":73,"title_fa":118},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":88,"slug":120,"source":8,"term":73,"title_fa":121},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":92,"slug":123,"source":8,"term":73,"title_fa":124},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":12,"slug":126,"source":8,"term":73,"title_fa":127},"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":6,"slug":129,"source":8,"term":73,"title_fa":130},"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":16,"slug":132,"source":8,"term":73,"title_fa":133},"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",{"free_preview":5,"order":135,"slug":136,"source":8,"term":73,"title_fa":137},11,"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":69,"slug":139,"source":8,"term":9,"title_fa":140},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":73,"slug":142,"source":8,"term":9,"title_fa":143},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":9,"slug":145,"source":8,"term":9,"title_fa":146},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":80,"slug":148,"source":8,"term":9,"title_fa":149},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":84,"slug":151,"source":8,"term":9,"title_fa":152},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":88,"slug":154,"source":8,"term":9,"title_fa":155},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":92,"slug":157,"source":8,"term":9,"title_fa":158},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},{"free_preview":5,"order":16,"slug":17,"source":8,"term":9,"title_fa":18},{"free_preview":5,"order":135,"slug":163,"source":8,"term":9,"title_fa":164},"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":69,"slug":166,"source":8,"term":80,"title_fa":167},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":73,"slug":169,"source":8,"term":80,"title_fa":170},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":9,"slug":172,"source":8,"term":80,"title_fa":173},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":80,"slug":175,"source":8,"term":80,"title_fa":176},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":84,"slug":178,"source":8,"term":80,"title_fa":179},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":88,"slug":181,"source":8,"term":80,"title_fa":182},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":92,"slug":184,"source":8,"term":80,"title_fa":185},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":12,"slug":187,"source":8,"term":80,"title_fa":188},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":69,"slug":190,"source":8,"term":84,"title_fa":191},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":73,"slug":193,"source":8,"term":84,"title_fa":194},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":9,"slug":196,"source":8,"term":84,"title_fa":197},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":80,"slug":199,"source":8,"term":84,"title_fa":200},"t5-s04-forms-styling","فصل ۰۴ — استایل فرم",{"free_preview":5,"order":84,"slug":202,"source":8,"term":84,"title_fa":203},"t5-s05-forms-validation","فصل ۰۵ — اعتبارسنجی فرم",{"free_preview":5,"order":88,"slug":205,"source":8,"term":84,"title_fa":206},"t5-s06-transforms","فصل ۰۶ — transform",{"free_preview":5,"order":92,"slug":208,"source":8,"term":84,"title_fa":209},"t5-s07-transitions","فصل ۰۷ — transition",{"free_preview":5,"order":12,"slug":211,"source":8,"term":84,"title_fa":212},"t5-s08-animation","فصل ۰۸ — animation و احترام به کاربر",{"free_preview":5,"order":6,"slug":214,"source":8,"term":84,"title_fa":215},"t5-s09-has-selector","فصل ۰۹ — :has() و تعامل بدون JavaScript",{"free_preview":5,"order":16,"slug":217,"source":8,"term":84,"title_fa":218},"t5-s10-interaction-project","فصل ۱۰ — پروژه: یک component تعاملی بدون JS",{"free_preview":5,"order":69,"slug":220,"source":8,"term":88,"title_fa":221},"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":73,"slug":223,"source":8,"term":88,"title_fa":224},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":9,"slug":226,"source":8,"term":88,"title_fa":227},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":80,"slug":229,"source":8,"term":88,"title_fa":230},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":84,"slug":232,"source":8,"term":88,"title_fa":233},"t6-s05-svg-icons","فصل ۰۵ — SVG و آیکون",{"free_preview":5,"order":88,"slug":235,"source":8,"term":88,"title_fa":236},"t6-s06-accessibility-deep","فصل ۰۶ — دسترس‌پذیری عمیق",{"free_preview":5,"order":92,"slug":238,"source":8,"term":88,"title_fa":239},"t6-s07-performance","فصل ۰۷ — سرعت",{"free_preview":5,"order":12,"slug":241,"source":8,"term":88,"title_fa":242},"t6-s08-architecture","فصل ۰۸ — معماری CSS در مقیاس بزرگ",{"free_preview":5,"order":6,"slug":244,"source":8,"term":88,"title_fa":245},"t6-s09-debugging","فصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌ها",{"free_preview":5,"order":16,"slug":247,"source":8,"term":88,"title_fa":248},"t6-s10-capstone-build","فصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ای",{"free_preview":5,"order":135,"slug":250,"source":8,"term":88,"title_fa":251},"t6-s11-capstone-ship","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",[],1784827105108]