در CSS، ویژگی position برای کنترل موقعیت مکانی عناصر در صفحه استفاده می‌شود.
این ویژگی تعیین می‌کند که یک عنصر نسبت به والد، صفحه، یا سایر عناصر چگونه قرار بگیرد. در این مقاله، انواع مقادیر position و نحوه‌ی استفاده از هرکدام را بررسی خواهیم کرد.
۱. معرفی مقدارهای position در CSS
| مقدار | توضیح |
|---|---|
static | موقعیت پیش‌فرض (عنصر در جریان عادی صفحه قرار دارد). |
relative | نسبت به موقعیت اولیه خود جابه‌جا می‌شود. |
absolute | نسبت به نزدیک‌ترین والد غیر استاتیک خود قرار می‌گیرد. |
fixed | نسبت به صفحه نمایش (viewport) ثابت می‌ماند. |
sticky | ترکیبی از relative و fixed، بسته به اسکرول صفحه تغییر می‌کند. |
۲. بررسی مقدارهای position با مثال
۱. static – موقعیت پیش‌فرض عناصر
- مقدار پیش‌فرض همه‌ی عناصر در CSS است.
- المان‌ها طبق ترتیب عادی سند (HTML Flow) چیده می‌شوند.
- مقادیر
top,left,right,bottomروی آن تأثیر ندارند.
✅ مثال:
.box {
position: static; /* مقدار پیش‌فرض */
background-color: lightblue;
padding: 10px;
}
🔹 در این مثال، .box طبق ترتیب طبیعی سند قرار می‌گیرد و موقعیت آن قابل تغییر نیست.
۲. relative – جابه‌جایی نسبت به موقعیت اولیه
- عنصر در جریان عادی سند باقی می‌ماند اما می‌توان آن را جابه‌جا کرد.
- مقادیر
top,left,right,bottomروی آن تأثیر دارند. - سایر عناصر صفحه موقعیت اولیه‌ی آن را در نظر می‌گیرند.
✅ مثال:
.box {
position: relative;
top: 20px;
left: 30px;
background-color: lightcoral;
}
🔹 این عنصر ۲۰px پایین‌تر و ۳۰px به راست‌تر از موقعیت اولیه خود حرکت می‌کند.
۳. absolute – نسبت به نزدیک‌ترین والد positioned
- از جریان عادی صفحه خارج می‌شود.
- نسبت به نزدیک‌ترین عنصر والد که
relative,absoluteیاfixedداشته باشد، تنظیم می‌شود. - اگر هیچ والد
positionedنداشته باشد، نسبت به صفحه (<html>) قرار می‌گیرد.
✅ مثال ۱ (بدون والد relative)
.box {
position: absolute;
top: 50px;
left: 50px;
background-color: lightgreen;
}
🔹 این عنصر نسبت به صفحه جابه‌جا می‌شود.
✅ مثال ۲ (نسبت به والد relative)
.container {
position: relative;
width: 300px;
height: 200px;
background-color: gray;
}
.box {
position: absolute;
top: 20px;
left: 20px;
background-color: yellow;
}
🔹 .box نسبت به .container جابه‌جا می‌شود، نه صفحه.
۴. fixed – موقعیت ثابت نسبت به صفحه نمایش (viewport)
- عنصر ثابت در صفحه نمایش باقی می‌ماند، حتی اگر صفحه اسکرول شود.
- موقعیت آن نسبت به مرورگر تنظیم می‌شود.
✅ مثال:
.fixed-box {
position: fixed;
top: 0;
right: 0;
width: 100px;
height: 50px;
background-color: red;
color: white;
text-align: center;
}
🔹 این عنصر همیشه در گوشه‌ی بالا سمت راست باقی می‌ماند، حتی هنگام اسکرول صفحه.
📌 کاربرد: مناسب برای هدرهای ثابت، نوار ناوبری چسبیده و دکمه‌های تماس سریع.
۵. sticky – ترکیب relative و fixed
- در ابتدا مثل
relativeرفتار می‌کند. - هنگام اسکرول، بعد از رسیدن به مقدار
topیاbottom، مثلfixedمی‌شود.
✅ مثال:
.sticky-box {
position: sticky;
top: 10px;
background-color: orange;
padding: 10px;
}
🔹 این عنصر تا زمانی که به ۱۰px از بالای صفحه برسد، ثابت می‌ماند.
📌 کاربرد: مناسب برای سربرگ‌ها، منوهای ناوبری و دکمه‌های اسکرول.
۳. تفاوت absolute, relative, fixed و sticky
| ویژگی | relative | absolute | fixed | sticky |
|---|---|---|---|---|
| موقعیت نسبت به | موقعیت اولیه خود | والد غیر static | صفحه نمایش | اسکرول صفحه |
| در جریان سند باقی می‌ماند؟ | ✅ بله | ❌ خیر | ❌ خیر | ✅ بله (تا زمان چسبندگی) |
| تحت تأثیر اسکرول است؟ | ✅ بله | ✅ بله | ❌ خیر | ✅ بله (تا حد مشخصی) |
| معمولاً برای چه استفاده می‌شود؟ | جابه‌جایی جزئی عناصر | قرارگیری دقیق‌تر | نوارهای ناوبری، دکمه‌های چسبیده | سربرگ‌ها و منوهای چسبنده |
۴. نکات مهم هنگام استفاده از position در CSS
✅ از relative برای جابه‌جایی کوچک بدون خروج از جریان صفحه استفاده کنید.
✅ absolute را داخل عناصر دارای relative قرار دهید تا کنترل بهتری داشته باشید.
✅ fixed را برای منوهای ناوبری و دکمه‌های ثابت به کار ببرید.
✅ sticky برای ایجاد منوهای چسبان و بخش‌های ثابت هنگام اسکرول کاربرد دارد.
۵. ترکیب position با z-index برای لایه‌بندی
🔹 z-index مقدار لایه‌ی یک عنصر را مشخص می‌کند. مقدار بیشتر، روی مقدار کمتر قرار می‌گیرد.
✅ مثال:
.box1 {
position: absolute;
z-index: 1;
background-color: blue;
}
.box2 {
position: absolute;
z-index: 2; /* روی box1 قرار می‌گیرد */
background-color: red;
}
✅ این مقدار تعیین می‌کند که .box2 روی .box1 نمایش داده شود.
۶. نتیجه‌گیری
🔹 ویژگی position در CSS به ما کمک می‌کند تا موقعیت دقیق عناصر را در صفحه تنظیم کنیم.
- از
staticبرای چیدمان پیش‌فرض استفاده می‌شود. - از
relativeبرای جابه‌جایی بدون خروج از جریان صفحه استفاده کنید. - از
absoluteبرای تعیین موقعیت دقیق داخل یک والد نسبی استفاده کنید. - از
fixedبرای المان‌هایی که باید همیشه در صفحه ثابت بمانند، استفاده کنید. - از
stickyبرای منوهای چسبان هنگام اسکرول استفاده کنید.
✅ انتخاب صحیح مقدار position به بهبود تجربه کاربری و زیبایی طراحی کمک می‌کند.
