كيف - صورة مثبتة
تعرف على كيفية إنشاء صورة ثابتة باستخدام CSS.
صورة مثبتة
ملاحظة: هذا المثال لا يعمل في Internet Explorer أو Edge 15 والإصدارات السابقة.
صورة مثبتة
مثال
img.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
يتم وضع العنصر position: sticky;
بناءً على موضع التمرير الخاص بالمستخدم.
يبدل العنصر اللاصق بين relative
و fixed
، اعتمادًا على موضع التمرير. يتم وضعه نسبيًا حتى يتم استيفاء موضع إزاحة معين في منفذ العرض - ثم "يتم تثبيته" في مكانه (مثل الموضع: ثابت).
ملاحظة: لا يدعم Internet Explorer و Edge 15 والإصدارات السابقة ميزة التثبيت الثابت للمواضع. يتطلب Safari بادئة -webkit- (انظر المثال أدناه). يجب عليك أيضًا تحديد واحد على الأقل من top
، right
أو للموضع الثابت للعمل bottom
.left
لمعرفة المزيد حول وضع CSS ، اقرأ البرنامج التعليمي لموضع CSS الخاص بنا.
لمعرفة المزيد حول كيفية تصميم الصور ، اقرأ البرنامج التعليمي الخاص بصور CSS .