ویژگی position در CSS

ویژگی position در CSS نحوهٔ قرارگیری (موقعیت‌یابی) یک عنصر در صفحه را کنترل می‌کند. با استفاده از این ویژگی، می‌توان عناصر را به صورت دقیق در جای دلخواه قرار داد.

در واقع position مشخص می‌کند که مرورگر چگونه باید موقعیت عنصر را با استفاده از ویژگی‌های top، right، bottom و left تفسیر کند.

دستور کلی

element {
  position: value;
  top: ...;
  right: ...;
  bottom: ...;
  left: ...;
}

مقادیر position

۱. static (پیش‌فرض)

این مقدار پیش‌فرض است. عنصر در جریان عادی صفحه قرار می‌گیرد و نمی‌توان از ویژگی‌های top, left, right, bottom استفاده کرد.

div {
  position: static;
}

نکته: بیشتر عناصر HTML به‌صورت پیش‌فرض static هستند.

۲. relative

عنصر نسبت به موقعیت عادی خودش جابه‌جا می‌شود. یعنی مکان اصلی عنصر حفظ می‌شود، ولی ظاهر آن می‌تواند با top، left و غیره تغییر کند.

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

کاربرد مهم: اغلب از relative برای موقعیت‌دهی فرزندان با absolute استفاده می‌شود.

۳. absolute

عنصر از جریان معمول صفحه حذف می‌شود و نسبت به نزدیک‌ترین عنصر والد که position غیر از static دارد، موقعیت‌گذاری می‌شود. اگر هیچ والد مناسبی نبود، نسبت به کل صفحه (body) تنظیم می‌شود.

.container {
  position: relative;
}
.popup {
  position: absolute;
  top: 0;
  right: 0;
}

نکته: عنصر absolutely-positioned دیگر فضای خود را اشغال نمی‌کند.

۴. fixed

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

nav {
  position: fixed;
  top: 0;
  width: 100%;
}

کاربرد: منوهای ثابت، دکمه‌های شناور، نوار اعلان بالا یا پایین.

۵. sticky

ترکیبی از relative و fixed است. عنصر ابتدا مانند relative عمل می‌کند، ولی وقتی به یک نقطه خاص رسید، به حالت fixed می‌چسبد.

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

مرورگرهای جدید از sticky پشتیبانی خوبی دارند.
پدر عنصر باید ارتفاع مشخص داشته باشد تا sticky عمل کند.

تفاوت‌ها به صورت جدول

مقدار	در جریان صفحه؟	موقعیت نسبت به؟	فضای خود را اشغال می‌کند؟
static	بله	موقعیت عادی	بله
relative	بله	موقعیت اصلی خودش	بله
absolute	خیر	نزدیک‌ترین پدر دارای position غیر static	خیر
fixed	خیر	پنجره مرورگر (viewport)	خیر
sticky	بله تا رسیدن به موقعیت، سپس خیر	ناحیهٔ والد و اسکرول	بله

نکات کلیدی

اگر هیچ والد دارای position غیر از static وجود نداشته باشد، عنصر با position: absolute نسبت به <html> یا <body> موقعیت‌گذاری می‌شود.
z-index فقط روی عناصری کار می‌کند که position آن‌ها چیزی غیر از static باشد.
موقعیت‌دهی دقیق اغلب به ترکیب position با flexbox یا grid و ویژگی‌های margin و padding نیاز دارد.
در موبایل، استفاده زیاد از fixed می‌تواند باعث مشکلات در تجربه کاربری شود (مانند پنهان شدن ناگهانی نوار ابزار مرورگر).

تمرین‌ها

تمرین ۱: موقعیت‌دهی ساده

عنصری بسازید که با position: relative از جای اصلی‌اش ۲۰ پیکسل به پایین و ۴۰ پیکسل به راست منتقل شود.

تمرین ۲: ساخت پنجره پاپ‌آپ

یک container با position: relative بسازید، و یک پاپ‌آپ کوچک داخل آن قرار دهید که با position: absolute در گوشه بالا-راست ظاهر شود.

تمرین ۳: نوار ثابت بالا

یک نوار منو طراحی کنید که همیشه در بالای صفحه باقی بماند (با position: fixed).

تمرین ۴: سربرگ چسبنده

سربرگی طراحی کنید که هنگام اسکرول از بالای صفحه نگذرد و بچسبد (با position: sticky).

جمع‌بندی

ویژگی position ابزاری قدرتمند برای کنترل موقعیت عناصر در صفحه است. یادگیری دقیق تفاوت بین مقادیر مختلف آن، مانند absolute، relative و fixed برای ساخت رابط‌های کاربری دقیق و حرفه‌ای ضروری است.

بهترین راه یادگیری position، تمرین زیاد و بازی با مثال‌های واقعی است. در ادامه این کتاب، با ترکیب position با flex و grid لایه‌بندی‌های پیچیده‌تری خواهیم ساخت.

مطالعه بیشتر