انواع position در CSS و کاربردهای آن

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

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

🔹 مقدار پیش‌فرض برای تمام عناصر HTML است.
🔹 عنصر در موقعیت طبیعی خود در صفحه قرار می‌گیرد.
🔹 نمی‌توان از ویژگی‌های top، right، bottom یا left برای تغییر مکان آن استفاده کرد.

div {
  position: static;
}

۲. relative (نسبی)

🔹 عنصر نسبت به جایگاه اولیه خود حرکت می‌کند.
🔹 می‌توان از top، right، bottom و left برای جابه‌جایی استفاده کرد.
🔹 سایر عناصر صفحه تغییری نمی‌کنند.

div {
  position: relative;
  top: 20px;
  left: 10px;
}

۳. absolute (مطلق)

🔹 عنصر از جریان عادی سند خارج شده و نسبت به نزدیک‌ترین عنصر موقعیت‌یافته (relative, absolute, fixed) یا body قرار می‌گیرد.
🔹 مکان آن با top، right، bottom و left مشخص می‌شود.

div {
  position: absolute;
  top: 50px;
  left: 100px;
}

۴. fixed (ثابت)

🔹 عنصر نسبت به پنجره مرورگر ثابت می‌ماند و با اسکرول حرکت نمی‌کند.
🔹 معمولا برای نوارهای ناوبری ثابت یا دکمه‌های چسبنده به کار می‌رود.

div {
  position: fixed;
  bottom: 10px;
  right: 20px;
}

۵. sticky (چسبنده)

🔹 ترکیبی از relative و fixed است.
🔹 تا زمانی که کاربر به مقدار مشخصی اسکرول نکرده، مثل relative رفتار می‌کند.
🔹 وقتی اسکرول به موقعیت تعیین‌شده رسید، مثل fixed در جای خود ثابت می‌شود.

div {
  position: sticky;
  top: 0;
}

مقایسه کلی position‌ها

اگر سوالی داشتی، بپرس! 😉