position: static و relative

پایه‌ای‌ترین حالت Positioning: static و relative

وارد فصل دهم شدیم؛ فصلی که به یکی از قدرتمندترین ابزارهای کنترل موقعیت عناصر در CSS اختصاص داره: Positioning. در فصل ۵ با Normal Flow آشنا شدیم که رفتار پیش‌فرض چیدمان عناصره. حالا وقتشه ببینیم چطور می‌شه این رفتار پیش‌فرض رو، با Property به اسم position، تغییر داد و کنترل دقیق‌تری روی مکان عناصر به‌دست آورد.

position چیست؟

Property به اسم position مشخص می‌کنه یک عنصر، از چه روشی برای تعیین موقعیتش استفاده کنه. این Property پنج مقدار اصلی داره: static، relative، absolute، fixed و sticky. در این درس، با دوتای اول شروع می‌کنیم؛ سه مقدار بعدی رو در درس‌های آینده همین فصل کامل بررسی می‌کنیم.

position: static (مقدار پیش‌فرض)

.box {
  position: static;
}

static مقدار پیش‌فرض تمام عناصر HTML‌ه؛ یعنی حتی اگه اصلاً position رو تعریف نکنیم، این مقدار به‌طور خودکار فعاله. در این حالت، عنصر دقیقاً طبق قوانین Normal Flow که در فصل ۵ دیدیم رفتار می‌کنه؛ یعنی جایگاهش کاملاً وابسته به ترتیب طبیعی عناصر در HTML‌ه، و هیچ کنترل دستی اضافه‌ای روی موقعیتش نداریم.

نکته مهم: Propertyهای Offset روی static بی‌اثرند

.box {
  position: static;
  top: 50px; /* بدون هیچ تأثیری */
  left: 30px; /* بدون هیچ تأثیری */
}

Propertyهایی مثل top، right، bottom و left (که در درس بعدی همین فصل کامل بررسی‌شون می‌کنیم)، فقط روی عناصری اثر دارن که مقدار position‌شون چیزی غیر از static باشه. یعنی روی یک عنصر static، تعریف این Propertyها کاملاً بی‌فایده‌ست و هیچ تغییری در ظاهر ایجاد نمی‌کنه.

position: relative چیست؟

.box {
  position: relative;
  top: 20px;
  left: 15px;
}

relativeposition: relative تعریف بشه، عنصر ابتدا دقیقاً طبق همون قوانین Normal Flow جایگذاری می‌شه (یعنی جایگاه اولیه‌ش تغییری نمی‌کنه)، ولی بعد، با کمک Propertyهای top، right، bottom و left، می‌شه اون رو از همون جایگاه اولیه‌ش، جابه‌جا کرد.

یک مثال ساده برای درک بهتر

.box {
  position: relative;
  top: 20px;
  left: 30px;
  background-color: coral;
}

<div>جعبه اول</div>
<div class="box">جعبه دوم (جابه‌جا می‌شود)</div>
<div>جعبه سوم</div>

در این مثال، «جعبه دوم» ابتدا دقیقاً همون‌جایی قرار می‌گیره که در Normal Flow قرار می‌گرفت (یعنی بین جعبه اول و سوم). سپس، به‌خاطر top: 20px و left: 30px، این جعبه ۲۰ پیکسل به پایین و ۳۰ پیکسل به راست، از جایگاه اصلی خودش، جابه‌جا می‌شه.

نکته حیاتی: فضای اصلی عنصر، خالی باقی می‌ماند

یکی از مهم‌ترین ویژگی‌های position: relative، اینه که وقتی عنصر جابه‌جا می‌شه، فضایی که در جایگاه اصلی‌ش (قبل از جابه‌جایی) اشغال کرده بود، همچنان محفوظ باقی می‌مونه؛ یعنی جعبه‌های دیگه، طوری رفتار می‌کنن که انگار این عنصر هنوز سر جای اولش هست، حتی با اینکه بصری، جای دیگه‌ای دیده می‌شه.

در مثال بالا، این یعنی بین «جعبه اول» و «جعبه سوم»، همچنان همون فضای خالی اصلی (که مخصوص «جعبه دوم» بود) باقی می‌مونه؛ فقط خود «جعبه دوم»، به‌صورت بصری، از اون فضا جابه‌جا و جای دیگه‌ای نمایش داده می‌شه. این رفتار، شباهت مفهومی به visibility: hidden که در فصل ۵ دیدیم داره؛ یعنی «فضای چیدمان» و «نمایش بصری»، از هم جدا شدن.

معنای دقیق مقادیر top، left، right و bottom در relative

Property	معنا در position: relative
top	چقدر از لبه بالای جایگاه اصلی، به سمت پایین جابه‌جا شود
bottom	چقدر از لبه پایین جایگاه اصلی، به سمت بالا جابه‌جا شود
left	چقدر از لبه چپ جایگاه اصلی، به سمت راست جابه‌جا شود
right	چقدر از لبه راست جایگاه اصلی، به سمت چپ جابه‌جا شود

نکته مهم: این مقادیر، برخلاف چیزی که ممکنه در نگاه اول تصور بشه، جهت جابه‌جایی رو نسبت به همون لبه مشخص می‌کنن؛ یعنی top: 20px یعنی «۲۰ پیکسل از لبه بالا، به داخل (پایین) فاصله بگیر»، که در عمل باعث میشه عنصر به سمت پایین حرکت کنه.

کاربرد بسیار رایج relative: ایجاد یک Containing Block برای فرزندان

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 10px;
  right: 10px;
}

شاید مهم‌ترین و رایج‌ترین کاربرد position: relative در پروژه‌های واقعی، نه جابه‌جا کردن مستقیم خود عنصر، بلکه استفاده ازش به‌عنوان یک نقطه مرجع برای فرزندانی باشه که position: absolute دارن؛ مفهومی که در درس بعدی همین فصل، با اسم Containing Block، به‌طور کامل و دقیق بررسیش می‌کنیم. فعلاً همین‌قدر کافیه بدونی که یک والد با position: relative (حتی بدون هیچ مقدار top یا leftای)، مرجع مهمی برای موقعیت‌دهی فرزندانش می‌سازه.

relative بدون هیچ مقدار Offset

.box {
  position: relative;
}

نکته جالب: می‌شه position: relative رو تعریف کرد، بدون اینکه هیچ‌کدوم از top، left، right یا bottom رو مشخص کنیم. در این حالت، عنصر از نظر بصری، دقیقاً همون‌جایی می‌مونه که در Normal Flow بود (چون هیچ جابه‌جایی درخواست نشده)؛ ولی همچنان، همون‌طور که در بالا اشاره شد، به‌عنوان یک Containing Block برای فرزندان absolute‌ش عمل می‌کنه. این الگو، یکی از رایج‌ترین کاربردهای عملی relative در CSS مدرنه.

نکات مهم

• static مقدار پیش‌فرض همه عناصر است و Propertyهای top، left، right، bottom روی آن هیچ اثری ندارند.
• relative عنصر را نسبت به جایگاه اصلی‌اش در Normal Flow جابه‌جا می‌کند، ولی فضای اصلی آن همچنان محفوظ باقی می‌ماند.
• یکی از رایج‌ترین کاربردهای relative، ایجاد یک نقطه مرجع (Containing Block) برای فرزندان absolute است، حتی بدون تعریف هیچ مقدار Offset.

اشتباهات رایج

• تلاش برای استفاده از top یا left روی یک عنصر با position: static، بدون توجه به این‌که این مقادیر بی‌اثر خواهند بود.
• تصور اینکه جابه‌جایی یک عنصر relative، باعث می‌شود عناصر مجاور جای خالی‌اش را پر کنند؛ در حالی که فضای اصلی آن همچنان محفوظ می‌ماند.
• غافل شدن از نقش مهم relative به‌عنوان Containing Block برای عناصر absolute داخلش.

جمع‌بندی

position: static رفتار پیش‌فرض و کاملاً وابسته به Normal Flow است، جایی که Propertyهای Offset هیچ تأثیری ندارند. position: relative اجازه می‌دهد عنصر، نسبت به جایگاه اصلی خودش در Normal Flow، با کمک top، right، bottom و left جابه‌جا شود؛ در حالی که فضای اصلی‌اش در چیدمان همچنان محفوظ باقی می‌ماند. این ویژگی، relative را به ابزاری مهم، هم برای جابه‌جایی جزئی عناصر و هم به‌عنوان نقطه مرجع برای عناصر absolute، تبدیل می‌کند.