انواع 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‌ها

مقدار	وابسته به مکان اولیه	تأثیر بر عناصر دیگر	موقعیت نسبی به
static			مکان طبیعی
relative			مکان طبیعی
absolute			نزدیک‌ترین عنصر دارای position
fixed			پنجره مرورگر
sticky			مکان اولیه تا حدی و سپس پنجره

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