موقعیت یابی CSS Positioning
صفحه آرایی با Positioning در CSS به شما امکان میدهد المنت ها را از جریان عادی سند خارج کرده و در موقعیتهای دقیق نسبت به container یا viewport (ناحیه قابل مشاهده صفحه) قرار دهید. این روش برای ایجاد المنت ها شناور، جعبههای نور، نوارهای کناری ثابت، منوها، و سایر المانهایی که نیاز به موقعیتدهی دقیق دارند، ایدهآل است.
انواع Positioning در CSS وجود دارد
Position static
این حالت پیشفرض برای همه المنت ها است و آنها را در جریان عادی سند قرار میدهد.
به این معنی که المنت ها بر اساس ترتیب HTML در صفحه قرار میگیرند و از خواص CSS مانند top, left, bottom, و right برای موقعیتدهی به آنها نمیتوان استفاده کرد.
Position relative
این حالت المنت را در جریان عادی سند نگه میدارد، اما به شما امکان میدهد آن را با استفاده از خواص top, left, bottom, و right نسبت به موقعیت فعلی خود جابجا کنید.
این حالت برای ایجاد المنت ها شناور، منوها، و سایر المانهایی که باید در جریان عادی سند باقی بمانند، اما در عین حال کمی از موقعیت خود جابجا شوند، مفید است.
Position absolute
این حالت المنت را از جریان عادی سند خارج میکند و در موقعیتی دقیق نسبت به container با موقعیت غیر static قرار میدهد.
اگر container شما position: static داشته باشد، المنت با position: absolute نسبت به viewport جابجا خواهد شد.
با استفاده از خواص top, left, bottom, و right میتوانید موقعیت دقیق المنت را در container مشخص کنید.
المنت با position: absolute، روی سایر المنت های که در جریان عادی سند هستند، قرار میگیرد.
Position fixed
این حالت نیز المنت را از جریان عادی سند خارج میکند، اما موقعیت آن را به طور ثابت نسبت به viewport (ناحیه قابل مشاهده صفحه) تعیین میکند.
به این معنی که المنت با position: fixed، حتی با اسکرول کردن صفحه، در موقعیت ثابتی باقی میماند.
این حالت برای ایجاد نوارهای کناری ثابت، سربرگهای چسبنده و سایر المانهایی که باید در هنگام اسکرول صفحه در یک موقعیت ثابت باقی بمانند، ایدهآل است.
تفاوتهای کلیدی
| ویژگی | static | relative | absolute | fixed |
|---|---|---|---|---|
| جریان سند | در جریان سند قرار میگیرد | در جریان سند باقی میماند | از جریان سند خارج میشود | از جریان سند خارج میشود |
| موقعیتدهی | از خواص top, left, bottom, و right پشتیبانی نمیکند | از خواص top, left, bottom, و right پشتیبانی میکند | از خواص top, left, bottom, و right پشتیبانی میکند | از خواص top, left, bottom, و right پشتیبانی میکند |
| موقعیت نسبت به | container | container | container با position غیر static | viewport |
| اسکرول صفحه | با اسکرول صفحه حرکت میکند | با اسکرول صفحه حرکت میکند (تا حدی) | با اسکرول صفحه حرکت نمیکند | با اسکرول صفحه حرکت نمیکند |
نکات
استفاده از position: absolute یا position: fixed میتواند باعث ایجاد مشکلاتی در صفحه آرایی صفحه شود، زیرا این المانها از فضای سایر المنت ها در جریان عادی سند اشغال میکنند.
برای حل این مشکل، میتوانید از z-index برای تعیین ترتیب لایهها در صفحه استفاده کنید.
استفاده از Flexbox یا Grid Layout برای صفحه آرایی المانها به طور کلی روشی مدرنتر و انعطافپذیرتر نسبت به Positioning است.
با این حال، Positioning همچنان در برخی موارد، مانند ایجاد المنت ها شناور یا نوارهای کناری ثابت، مفید است.