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