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

این ویژگی مشخص می‌کند که یک عنصر چگونه در رابطه با عناصر دیگر و صفحه قرار بگیرد. در این راهنما، انواع مقدارهای position را بررسی کرده و کاربردهای آن‌ها را توضیح می‌دهیم.

۱. انواع position در CSS

ویژگی position پنج مقدار اصلی دارد:

1. static (پیش‌فرض)
2. relative (نسبی)
3. absolute (مطلق)
4. fixed (ثابت)
5. sticky (چسبنده)

۲. مقدار static (حالت پیش‌فرض)

به‌طور پیش‌فرض، همه عناصر در HTML دارای position: static; هستند. این یعنی موقعیت آن‌ها مطابق با جریان طبیعی صفحه تعیین می‌شود و تنظیم ویژگی‌های top، right، bottom و left روی آن‌ها اثری ندارد.

.element {
    position: static;
}

✅ کاربرد: نیازی به تغییر این مقدار نیست مگر اینکه بخواهید موقعیت عنصر را تغییر دهید.

۳. مقدار relative (نسبی)

وقتی position: relative; روی یک عنصر تنظیم شود، موقعیت آن نسبت به جایگاه اولیه خود در جریان طبیعی صفحه تغییر می‌کند.

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

📌 نکته: در این حالت، عنصر از جایگاه اصلی خود فاصله می‌گیرد اما همچنان در همان فضا باقی می‌ماند و روی سایر عناصر تأثیری نمی‌گذارد.

✅ کاربرد:

• برای تنظیم جزئی مکان یک عنصر بدون تغییر جریان صفحه
• برای استفاده به‌عنوان مرجع در موقعیت‌دهی عناصر absolute

۴. مقدار absolute (مطلق)

وقتی position: absolute; روی یک عنصر تنظیم شود، آن عنصر از جریان عادی صفحه خارج شده و موقعیت آن نسبت به نزدیک‌ترین والد نسبی (relative, absolute, fixed, sticky) تعیین می‌شود.

.container {
    position: relative;
}
.child {
    position: absolute;
    top: 50px;
    left: 30px;
}

📌 نکته: اگر عنصری که absolute دارد، درون یک والد relative قرار نداشته باشد، موقعیت آن نسبت به بدنه (body) تعیین می‌شود.

✅ کاربرد:

• برای قرار دادن المان‌ها در یک موقعیت دقیق
• ایجاد منوهای کشویی، مودال‌ها، یا عناصر متحرک

۵. مقدار fixed (ثابت)

وقتی position: fixed; روی یک عنصر تنظیم شود، آن عنصر از جریان عادی خارج شده و موقعیت آن نسبت به کل صفحه ثابت می‌ماند، حتی هنگام اسکرول صفحه.

.element {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: black;
    color: white;
}

✅ کاربرد:

• ایجاد هدر یا منوی چسبیده که هنگام اسکرول ثابت می‌ماند
• ایجاد دکمه‌های “بازگشت به بالا” یا “چت شناور”

۶. مقدار sticky (چسبنده)

position: sticky; ترکیبی از relative و fixed است. این مقدار باعث می‌شود که عنصر در جایگاه اولیه خود باقی بماند تا زمانی که کاربر به مقدار مشخصی اسکرول کند، سپس به حالت چسبیده در می‌آید.

.element {
    position: sticky;
    top: 20px;
    background: yellow;
}

📌 نکته: ویژگی top یا bottom باید حتماً تعیین شود تا عنصر رفتار sticky داشته باشد.

✅ کاربرد:

• ایجاد سربرگ‌هایی که در حین اسکرول صفحه در بالا باقی می‌مانند
• ایجاد فهرست‌های ناوبری چسبنده

۷. مقایسه position های مختلف

۸. نتیجه‌گیری

ویژگی position در CSS یکی از ابزارهای کلیدی برای کنترل دقیق موقعیت عناصر در صفحه است. با درک تفاوت‌های انواع مقدارهای آن، می‌توان چیدمان‌های حرفه‌ای و کاربرپسند ایجاد کرد.