کاربرد "ویژگی position"

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

  •  static: مقدار پیشفرض برای عناصر است و به آنها اجازه میدهد که در جریان عادی صفحه قرار بگیرند.  •  relative: مکان عنصر را نسبت به مکان اولیهاش تغییر میدهد، و میتوان با استفاده از خصوصیات top, right, bottom, و left آن را جابجا کرد.  

•  fixed: عنصر را نسبت به صفحه نمایش ثابت نگه میدارد، به طوری که حتی با اسکرول کردن صفحه، عنصر در جای خود باقی میماند.  

•  absolute: مکان عنصر را نسبت به نزدیکترین عنصر پدر موقعیتدار (positioned ancestor) تعیین میکند.

  •  sticky: ترکیبی از relative و fixed است، به این صورت که عنصر در حالت عادی مانند relative رفتار میکند ولی پس از رسیدن به یک نقطه مشخص در اسکرول، مانند fixed ثابت میشود.  برای مثال، اگر بخواهیم یک منو را در بالای صفحه ثابت کنیم، میتوانیم از position: fixed به این شکل استفاده کنیم:  ul.MyMenu { position: fixed; top: 0; }  یا اگر بخواهیم یک عنصر را نسبت به مکان اولیهاش به سمت راست جابجا کنیم، میتوانیم از position: relative و right استفاده کنیم:  div { position: relative; right: 20px; }  این ویژگیها به شما اجازه میدهند که طراحیهای پیچیدهتر و واکنشگراتری را برای صفحات وب ایجاد کنید .