موقعیت

از این ابزارهای مختصر برای پیکربندی سریع موقعیت یک عنصر استفاده کنید.

ارزش های مشترک

کلاس های موقعیت یابی سریع در دسترس هستند، اگرچه پاسخگو نیستند.

<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>

بالا ثابت

یک عنصر را از لبه به لبه در بالای پنجره دید قرار دهید. مطمئن شوید که پیامدهای موقعیت ثابت در پروژه خود را درک می کنید. ممکن است لازم باشد CSS اضافی اضافه کنید.

<div class="fixed-top">...</div>

پایین ثابت

یک عنصر را از لبه به لبه در پایین درگاه دید قرار دهید. مطمئن شوید که پیامدهای موقعیت ثابت در پروژه خود را درک می کنید. ممکن است لازم باشد CSS اضافی اضافه کنید.

<div class="fixed-bottom">...</div>

بالای چسب

یک عنصر را از لبه به لبه در بالای پنجره نمایش قرار دهید، اما فقط پس از اینکه از کنار آن عبور کنید. این .sticky-topابزار از CSS استفاده می کند position: stickyکه به طور کامل در همه مرورگرها پشتیبانی نمی شود.

IE11 و IE10 به صورت رندر می position: stickyشوند position: relative. به این ترتیب، ما استایل ها را در یک @supportsپرس و جو قرار می دهیم و چسبندگی را فقط به مرورگرهایی محدود می کنیم که می توانند آن را به درستی ارائه دهند.

<div class="sticky-top">...</div>