مقدمه

اگر مدتی با CSS کار کرده باشید، احتمالاً با ویژگی position و مقادیر مختلف آن روبه‌رو شده‌اید. در بین این مقادیر، relative و absolute از مهم‌ترین و پرکاربردترین گزینه‌ها هستند که در بسیاری از پروژه‌های طراحی وب استفاده می‌شوند.

با این حال، بسیاری از توسعه‌دهندگان تازه‌کار هنگام یادگیری این دو مقدار دچار سردرگمی می‌شوند؛ زیرا رفتار آن‌ها همیشه مطابق انتظار نیست و نحوه قرارگیری عناصر را به شکل قابل توجهی تغییر می‌دهد.

در این مقاله قصد داریم به زبان ساده و با مثال‌های کاربردی، نحوه عملکرد position: relative و position: absolute را بررسی کنیم تا درک بهتری از سیستم موقعیت‌دهی در CSS داشته باشید.

مفهوم Render Flow چیست؟

قبل از اینکه سراغ Position برویم، باید با مفهومی به نام Render Flow یا جریان رندر آشنا شویم.

به طور پیش‌فرض، مرورگر تمام عناصر HTML را به ترتیب از بالا به پایین و از چپ به راست در صفحه قرار می‌دهد.

به بیان ساده:

1. مرورگر اولین عنصر را رسم می‌کند.
2. سپس عنصر بعدی را در جای مناسب قرار می‌دهد.
3. این روند تا انتهای صفحه ادامه پیدا می‌کند.

اگر تا به حال اینترنت کند داشته‌اید و دیده‌اید که هنگام بارگذاری تصاویر بزرگ، سایر بخش‌های صفحه جابه‌جا می‌شوند، در واقع در حال مشاهده Render Flow بوده‌اید.

مرورگر همیشه سعی می‌کند عناصر را در یک جریان طبیعی و منظم نمایش دهد.

ویژگی position به ما اجازه می‌دهد این جریان طبیعی را تغییر دهیم.

ویژگی Position در CSS

به کمک ویژگی position می‌توان نحوه قرارگیری عناصر در صفحه را کنترل کرد.

مقادیر مختلف این ویژگی عبارت‌اند از:

.foo {
  position: static;
  /* position: relative;
  position: absolute;
  position: sticky;
  position: fixed; */
}

در این مقاله روی دو مقدار مهم تمرکز می‌کنیم:

• relative
• absolute

زیرا یادگیری این دو گزینه، پایه درک سایر حالت‌های Position محسوب می‌شود.

Position Relative

وقتی برای یک عنصر مقدار position: relative را تعریف می‌کنید، عنصر همچنان در جریان طبیعی صفحه باقی می‌ماند، اما می‌توانید موقعیت آن را جابه‌جا کنید.

مثال:

.green-square {
  position: relative;
  top: 25px;
  left: 25px;
}

در این مثال مربع سبز:

• ۲۵ پیکسل به سمت پایین حرکت می‌کند.
• ۲۵ پیکسل به سمت راست حرکت می‌کند.

اما نکته مهم این است که فضای اصلی عنصر همچنان در صفحه حفظ می‌شود.

Relative نسبت به چه چیزی عمل می‌کند؟

کلمه Relative به معنای «نسبی» است.

یعنی عنصر نسبت به جایگاه اصلی خودش جابه‌جا می‌شود.

فرض کنید مرورگر قصد داشته عنصر را در نقطه‌ای مشخص نمایش دهد.

وقتی می‌نویسیم:

top: 25px;
left: 25px;

در واقع می‌گوییم:

عنصر را نسبت به موقعیت اولیه‌اش ۲۵ پیکسل جابه‌جا کن.

به همین دلیل عنصر هنوز بخشی از Layout محسوب می‌شود و فضای قبلی خود را اشغال می‌کند.

Relative همچنان در Flow باقی می‌ماند

این موضوع مهم‌ترین تفاوت Relative با Absolute است.

در Relative:

• عنصر از جریان صفحه خارج نمی‌شود.
• فضای قبلی آن حفظ می‌شود.
• فقط موقعیت ظاهری آن تغییر می‌کند.

به همین دلیل معمولاً گفته می‌شود که Relative فقط عنصر را «هل می‌دهد» و جابه‌جا می‌کند.

Position Absolute

حالا به سراغ یکی از قدرتمندترین قابلیت‌های CSS می‌رویم.

.orange-square {
  position: absolute;
  top: 0;
  left: 0;
}

برخلاف Relative، زمانی که یک عنصر Absolute می‌شود:

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

به همین دلیل ممکن است نتایج اولیه کمی عجیب به نظر برسند.

چرا عنصر ناگهان جابه‌جا می‌شود؟

فرض کنید یک مربع نارنجی در وسط یک Grid قرار دارد.

به محض اینکه:

position: absolute;

را اعمال کنید، عنصر از Layout خارج می‌شود و دیگر جای قبلی خود را اشغال نمی‌کند.

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

نقطه شروع مختصات در Absolute

وقتی از Absolute استفاده می‌کنید، مرورگر به دنبال یک نقطه مرجع برای محاسبه مختصات می‌گردد.

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

بنابراین:

position: absolute;
top: 0;
left: 0;

عنصر را به گوشه بالا سمت چپ صفحه منتقل می‌کند.

تعیین مرجع برای عناصر Absolute

یکی از مهم‌ترین تکنیک‌های CSS این است که برای والد، position: relative تعریف کنیم.

مثال:

.grid {
  position: relative;
}

.orange-square {
  position: absolute;
  top: 0;
  left: 0;
}

در این حالت عنصر Absolute دیگر نسبت به کل صفحه محاسبه نمی‌شود.

بلکه مختصات آن نسبت به عنصر والد (.grid) محاسبه خواهد شد.

قانون طلایی Absolute

تقریباً در اکثر پروژه‌های واقعی از این الگو استفاده می‌شود:

.parent {
  position: relative;
}

.child {
  position: absolute;
}

به همین دلیل معمولاً می‌شنوید که:

Absolute همیشه نسبت به نزدیک‌ترین والدی که Position داشته باشد محاسبه می‌شود.

این تکنیک برای ساخت:

• منوهای کشویی
• Tooltip ها
• Badge ها
• مودال‌ها
• کارت‌های سفارشی
• لایه‌های روی تصاویر

بسیار کاربردی است.

تفاوت Relative و Absolute

جمع‌بندی

ویژگی‌های position: relative و position: absolute از مهم‌ترین ابزارهای CSS برای کنترل چیدمان عناصر هستند.

به طور خلاصه:

• relative عنصر را نسبت به جایگاه اصلی خودش جابه‌جا می‌کند و همچنان در Layout باقی می‌ماند.
• absolute عنصر را از جریان صفحه خارج می‌کند و امکان قرارگیری دقیق آن را در هر نقطه فراهم می‌سازد.
• بهترین و رایج‌ترین الگو در پروژه‌های واقعی استفاده از position: relative روی والد و position: absolute روی فرزند است.

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

از همراهی شما با پارمین کلود سپاسگزاریم.