جمع‌بندی دقیق چهار Property جابه‌جایی: top، right، bottom و left

در سه درس قبل، بارها از top، right، bottom و left استفاده کردیم، ولی هر بار در کنار یک مقدار خاص از position. حالا وقتشه این چهار Property رو، مستقل و کامل، از زاویه دقیق‌تری بررسی کنیم؛ ببینیم دقیقاً چطور محاسبه می‌شن، چه رفتاری در تداخل با هم دارن، و چه نکات ظریفی بین مقادیر مختلف position وجود داره.

Offset Properties چه هستند؟

Offset Properties (Propertyهای جابه‌جایی) به چهار Property به اسم top، right، bottom و left گفته می‌شه. این چهار Property، فقط زمانی اثر دارن که مقدار position یک عنصر، چیزی غیر از static باشه (یعنی relative، absolute، fixed یا sticky).

معنای هر Property بسته به نوع position

یکی از نکات مهمی که باید دقیق درک بشه، اینه که معنای این چهار مقدار، بسته به این‌که position چی باشه، کمی متفاوت تفسیر می‌شه.

در position: relative

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

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

در position: absolute و fixed

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

در حالت absolute یا fixed، معنای این مقادیر کاملاً متفاوته: اینجا یعنی «فاصله دقیق از لبه متناظر Containing Block». یعنی top: 20px باعث می‌شه لبه بالای عنصر، دقیقاً ۲۰ پیکسل پایین‌تر از لبه بالای Containing Block (که در درس ۱۰-۲ دیدیم چطور تعیین می‌شه) قرار بگیره.

وقتی مقادیر متضاد هم‌زمان تعریف بشن: top و bottom با هم

.box {
  position: absolute;
  top: 20px;
  bottom: 20px;
}

اگه هر دو top و bottom هم‌زمان (روی یک عنصر absolute یا fixed) تعریف بشن، و height عنصر مشخص نشده باشه، مرورگر به‌طور خودکار ارتفاع عنصر رو طوری محاسبه می‌کنه که هم‌زمان هر دوی این فاصله‌ها رعایت بشن؛ یعنی عنصر به‌طور خودکار، بین این دو مرز، کشیده می‌شه. همین رفتار، دقیقاً برای left و right هم‌زمان (برای محور افقی و width) هم صادقه.

وقتی هم width و هم left و right تعریف بشه

.box {
  position: absolute;
  left: 10px;
  right: 10px;
  width: 200px;
}

اگه هر سه مقدار (left، right و width) هم‌زمان تعریف بشن، این سه مقدار ممکنه با هم تناقض داشته باشن (چون فضای بین دو لبه، ممکنه دقیقاً برابر width تعریف‌شده نباشه). در این حالت، طبق قوانین استاندارد CSS، مقدار right نادیده گرفته می‌شه و محاسبه بر اساس left و width انجام می‌شه (این رفتار می‌تونه بسته به جهت نوشتار سند -که در فصل Logical Properties می‌بینیم- کمی متفاوت باشه). برای جلوگیری از این ابهام، بهتره در عمل، یا فقط دو مقدار از این سه‌تا رو با هم تعریف کنیم، یا مطمئن باشیم مقادیرشون واقعاً با هم سازگارن.

معنای این Propertyها در position: sticky

.sticky-box {
  position: sticky;
  top: 0;
}

در حالت sticky، همون‌طور که در درس قبل دیدیم، این مقادیر معنای «آستانه چسبندگی» دارن؛ یعنی top: 0 یعنی «وقتی لبه بالای این عنصر به لبه بالای Viewport رسید، بچسب». این یک معنای سوم و کاملاً متفاوت از دو حالت قبلیه.

جدول جمع‌بندی معنای Offset در هر نوع position

مقدار position معنای top/right/bottom/left
static بی‌اثر است
relative میزان جابه‌جایی نسبت به جایگاه اصلی در Normal Flow
absolute / fixed فاصله دقیق از لبه متناظر Containing Block
sticky آستانه‌ای که در آن عنصر باید بچسبد

واحدهای قابل استفاده در Offset Properties

.box-a {
  position: absolute;
  top: 20px;
}

.box-b {
  position: absolute;
  top: 10%;
}

این چهار Property می‌تونن هر واحد طولی معتبری (که در فصل ۶ دیدیم) بگیرن؛ از جمله px، rem، یا درصد. مقدار درصدی، نسبت به اندازه متناظر Containing Block محاسبه می‌شه؛ مثلاً top: 10% روی یک عنصر absolute، یعنی ۱۰٪ از ارتفاع Containing Block.

یک مثال کاربردی: وسط‌چین کردن مطلق یک عنصر

.parent {
  position: relative;
  height: 400px;
}

.centered-box {
  position: absolute;
  top: 50%;
  left: 50%;
}

در این مثال، top: 50% و left: 50%، گوشه بالا-چپ .centered-box رو دقیقاً وسط .parent قرار می‌ده؛ اما توجه کن که این کار، فقط گوشه بالا-چپ عنصر رو وسط می‌بره، نه کل عنصر رو. برای وسط‌چین کردن کامل (به‌طوری که مرکز خود عنصر، دقیقاً وسط والد باشه)، معمولاً به یک Property دیگه به اسم transform هم نیاز داریم؛ موضوعی که به‌طور کامل در فصل Transforms بررسیش می‌کنیم.

نکات مهم

  • معنای Offset Properties، بسته به نوع position (relative در برابر absolute/fixed در برابر sticky)، کاملاً متفاوت تفسیر می‌شود.
  • تعریف هم‌زمان top و bottom (یا left و right) بدون height یا width مشخص، باعث کشیده شدن خودکار عنصر بین دو لبه می‌شود.
  • مقدار درصدی در این Propertyها، همیشه نسبت به اندازه متناظر Containing Block محاسبه می‌شود.

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

  • تصور یکسان بودن معنای top/left در relative و absolute؛ در حالی که این دو، مبنای محاسبه کاملاً متفاوتی دارند.
  • تعریف هم‌زمان left، right و width با مقادیر ناسازگار، بدون آگاهی از اینکه کدام مقدار در نهایت نادیده گرفته می‌شود.
  • انتظار وسط‌چین شدن کامل یک عنصر فقط با top: 50% و left: 50%، بدون در نظر گرفتن نیاز به transform برای جبران ابعاد خود عنصر.

جمع‌بندی

Propertyهای top، right، bottom و left، فقط روی عناصر با position غیر از static اثر دارند، اما معنای دقیق‌شان بسته به نوع position متفاوت است: در relative میزان جابه‌جایی از جایگاه اصلی را نشان می‌دهند، در absolute و fixed فاصله دقیق از Containing Block را، و در sticky آستانه چسبندگی را مشخص می‌کنند. درک این تفاوت‌های ظریف، برای استفاده درست و بدون خطا از این چهار Property در پروژه‌های واقعی ضروری است.