position در CSS: فرق static و relative و absolute و fixed

در CSS پنج کلمه هست که تعیین می‌کنند هر عنصر «کجا» بایستد: static، relative، absolute، fixed و sticky. پنج مقدارِ یک ویژگی به اسم position — و احتمالاً هیچ بخشی از CSS به این اندازه با آزمون‌وخطای کورکورانه استفاده نشده: absolute می‌دهی، عنصر می‌پرد یک جای عجیب؛ relative می‌دهی، انگار هیچ اتفاقی نمی‌افتد.

رمزِ ماجرا این است که این پنج مقدار پنج جوابِ متفاوت به یک سؤال‌اند: «این عنصر نسبت به چه چیزی جابه‌جا شود؟» تا آن «نسبت به چی» را ندانی، هر top و left ای که بنویسی قمار است.

اول: جریانِ عادی

بدون هیچ position ای، مرورگر عنصرها را مثل کلمه‌های یک متن می‌چیند: یکی پس از دیگری، هر کدام به اندازهٔ خودش جا می‌گیرد و بقیه را جلو می‌راند. به این می‌گویند جریانِ سند (flow). مقدارِ پیش‌فرض یعنی position: static فقط همین را می‌گوید: «در جریان بمان.» به همین دلیل روی عنصر static، نوشتنِ top و left هیچ اثری ندارد — عنصری که در صف ایستاده، مختصات قبول نمی‌کند.

relative: جابه‌جا شو، ولی جایت را نگه دار

position: relative عنصر را نسبت به جای خودش جابه‌جا می‌کند:

.badge { position: relative; top: -4px; }

یعنی «چهار پیکسل بالاتر از جایی که بودی.» دو نکتهٔ مهم دارد:

• جای خالی‌اش در صف محفوظ می‌ماند — بقیهٔ عنصرها جوری رفتار می‌کنند که انگار او هنوز همان‌جاست. برای همین relative بدون top/left «هیچ کاری نمی‌کند»…
• …به‌جز یک کارِ نامرئی و کلیدی: عنصرِ relative برای فرزندانِ absolute اش مرجع می‌شود. که می‌رسیم به آن.

absolute: از صف بیرون بیا و به مرجع بچسب

position: absolute عنصر را کلاً از جریان بیرون می‌کشد — صف جوری بسته می‌شود که انگار او هیچ‌وقت نبوده — و بعد او را نسبت به نزدیک‌ترین والدِ position‌دار مختصات می‌دهد:

.card { position: relative; } .card .close { position: absolute; top: 8px; left: 8px; }

این زوج، پرکاربردترین الگوی position در دنیای واقعی است: والد relative (بدون هیچ جابه‌جایی، فقط برای مرجع‌شدن) + فرزند absolute که گوشه‌اش می‌نشیند. دکمهٔ بستنِ روی کارت، برچسبِ «جدید» روی محصول، آیکونِ داخل فیلد جست‌وجو — همه همین دو خط‌اند.

و جوابِ «چرا absolute پرید یک جای عجیب؟» تقریباً همیشه یکی است: هیچ والدی position نداشت. آن‌وقت مرجع می‌شود کلِ صفحه، و عنصر می‌رود گوشهٔ سند — جایی که انتظارش را نداشتی.

fixed: به شیشهٔ مرورگر بچسب

position: fixed هم از جریان بیرون می‌کشد، ولی مرجعش نه والد است و نه صفحه — پنجرهٔ مرورگر است. اسکرول کنی، تکان نمی‌خورد. دکمهٔ «برو بالا»، نوارِ اعلانِ پایین صفحه، پس‌زمینه‌ی مودال‌ها.

بهای این چسبندگی: چون از جریان بیرون است، هیچ جایی برایش رزرو نمی‌شود و ممکن است روی محتوا بیفتد — و اینجاست که پای هم‌پوشانی و لایه‌ها وسط می‌آید؛ اگر تا حالا با «چرا z-index کار نمی‌کند» روبه‌رو شده‌ای، ماجرای stacking context را بخوان: fixed خودش یکی از حباب‌سازهاست.

sticky: مؤدب‌ترینِ خانواده

position: sticky ترکیبِ هوشمندانهٔ دو دنیاست: عنصر در جریان می‌ماند و عادی اسکرول می‌شود، تا وقتی به آستانه‌ای که گفتی برسد — از آن به بعد می‌چسبد:

.toc { position: sticky; top: 0; }

سرفصل‌هایی که موقع اسکرولِ جدول‌های بلند بالا می‌مانند، همین‌اند. دو شرطِ کار کردنش: مقدارِ آستانه (مثل top: 0) حتماً لازم است، و عنصر فقط در محدودهٔ والد خودش می‌چسبد — والد که تمام شد، sticky هم با آن می‌رود.

جدول تصمیم

می‌خواهی…	بنویس	مرجعِ مختصات
هیچی — چیدمان عادی	(هیچ / static)	—
میکروجابه‌جایی بدون به‌هم‌زدن صف	relative	جای خودِ عنصر
نشاندن روی گوشهٔ یک جعبه	absolute + والدِ relative	نزدیک‌ترین والد position‌دار
ثابت هنگام اسکرول	fixed	پنجرهٔ مرورگر
عادی، ولی از جایی به بعد چسبان	sticky + آستانه	محدودهٔ والد

این جدول را که در ذهن داشته باشی، از پنج مقدار فقط دو سؤال می‌ماند: «از جریان بیرون بیاید یا نه؟» و «مرجعش کیست؟» — بقیه top و left است. برای کارکردنِ عملی با همهٔ این‌ها — کنار سلکتورها و Flexbox و Grid — دورهٔ تاروپود تمرین زندهٔ داخل مرورگر دارد؛ هر مثال را همان‌جا خراب کن و درست کن، که تنها راهِ واقعیِ یادگرفتنِ position همین است.