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