CSS Positions یکی از پارامترهای مهم برای شروع کار با css و پیاده‌سازی layout وب سایت هستش. به طور کلی position میتونه یکی از موارد زیر باشه:
- static
- relative
- absolute
- fixed
static
به صورت پیش‌فرض position تگ‌ها به صورت static هستش و اگر display:block باشه عناصر یکی بعد از دیگری به صورت عمودی قرار میگیرن و اگر display:inline باشه عناصر به صورت افقی یکی بعد از دیگری به ترتیب قرار گیری در سند HTML در صفحه قرار میگیرن. در حالت static نمیشه از پارامترهای right ، left ، top و bottom استفاده کرد.
relative
شبیه به حالت static عمل می‌کنه با این تفاوت که میشه از پارامترهای right ، left ، top و bottom استفاده کرد و موقعیت عنصر را در صفحه تغییر داد. موقعیت عنصر بر اساس موقعیت عنصر والد ( Parent Element ) محاسبه میشه و بعد از تغییر موقعیت عنصر جای قبلی اون در صفحه حفظ میمونه و عنصر دیگه‌ای اونجا قرار نمیگیره.
absolute
شبیه به حالت relative عمل می‌کنه با این تفاوت که موقعیت عنصر بر اساس اولین عنصر والد با position:relative در DOM محاسبه میشه ( اگر والدی با position:relative نبود بر اساس صفحه ی مرورگر (تگ body) محاسبه میشه ) و موقعیت قبلی عنصر بعد از تغییر به absolute حذف میشه و دیگر عناصر جای اون رو تصاحب می‌کنن.
fixed
شبیه به حالت absolute با این تفاوت که در این حالت موقعیت عنصر بر اساس صفحه‌ای که کاربر میبینه محاسبه میشه و با اسکرول کردن صفحه تغییری در جای عنصر ایجاد نمیشه و fix میمونه