موقع

استخدم أدوات الاختزال المساعدة هذه لتكوين موضع عنصر بسرعة.

القيم المشتركة

تتوفر فئات سريعة لتحديد المواقع ، على الرغم من أنها لا تستجيب.

<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>