موقع
استخدم أدوات الاختزال المساعدة هذه لتكوين موضع عنصر بسرعة.
القيم المشتركة
تتوفر فئات سريعة لتحديد المواقع ، على الرغم من أنها لا تستجيب.
<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>