Position در css چیست و چه کاربردی دارد؟

خیلی خلاصه توضیح میدم که متوجه بشید.

با position میتونید بگید یه المنت یا عنصر، در کجای صفحه قرار بگیره. در واقع موقعیت و مکان یه المنت رو تعیین میکنیم.

position چندین حالت داره:

position:static - موقعیت عنصر در همان جایی که کد آنها را می نویسید دیده میشه. مثلا اگه انتهای صفحه هستین. همون جا نمایش داده میشه.

position:fixed - موقعیت عنصر ثابت میمونه حتی در صورتی که به بالا و پایین صفحه برویم(scrolled)

position:relative - موقعیت عنصر با توجه به عنصر والد تعیین میشه(یعنی زیر مجموعه عنصر والد هست)

position:absolute - موقعیت عنصر با توجه به اولین عنصر والد با خاصیت Relative تعیین میشه. اگر همچین والدی پیدا نشد، با توجه به پنجره مرورگر تعیین میشه. اولین نقطه پنجره بالا سمت چپ هست.

خب تا اینجا مشخص کردیم عناصر صفحه با position در صفحه چه رفتاری از خودشون نشون بدن.

ولی ما میخوایم دقیق بگیم که فلان عنصر شما جات اینجای صفحه است.

واسه این کار از خصوصیت های top,right,bottom,left استفاده میکنیم و با مقادیر دلخواه، مثلا top:30px میگیم 30 پیکسل از بالا فاصله بگیر.

یه مثال :

توی کدهای html میبینید که div ها پشت سر هم قرار گرفتن.

ولی چون  position مستطیل قرمز absolute هست و هیچ والد relative نداره، موقعیتش نسبت به مرورگر تعیین شده.

در صورتی که اگه position هر دو رو حذف کنید، div ها پشت سرهم قرار میگیرند.

همچنین با پراپرتی های top و left، مستطیل قرمز رو از بالا و چپ تعیین موقعیت کردیم.