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

پاسخ هوش مصنوعی

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

• static: این حالت پیش فرض است. عنصر به صورت طبیعی در جریان گرافیکی صفحه قرار می گیرد و نمی توان با استفاده از top، right، bottom، یا left آن را جابجا کرد.
• relative: عنصر نسبت به موقعیت خود در حالت static جابجا می شود. با استفاده از top، right، bottom و left می توان مکان آن را تعدیل کرد.
• absolute: عنصر به صورت مستقل از سایر عناصر قرار می گیرد و نسبت به نزدیک ترین والد با position غیر از static موقعیت یابی می شود.
• fixed: عنصر به ناف (viewport) چسبیده است و در هنگام اسکرول صفحه جابجا نمی شود. این حالت معمولاً برای ایجاد نوار ابزار یا عناصر ثابت در صفحه استفاده می شود.
• sticky: ترکیبی از relative و fixed است. عنصر در حالت relative شروع می کند و پس از جابجایی به موقعیت خاصی تبدیل به fixed می شود.

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

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

با 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، مستطیل قرمز رو از بالا و چپ تعیین موقعیت کردیم.