كيفية إنشاء: العناصر المتدرجة

تعلم كيفية استخدام CSS لإنشاء العناصر المتدرجة.

جرب بنفسك

ملاحظة:هذا المثال لا ينطبق على Internet Explorer أو Edge 15 والإصدارات الأقدم.

العناصر المتدرجة

مثال

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

جرب بنفسك

العناصر التي تستخدم position: sticky; يتم تثبيتها بناءً على موقع التمرير للمستخدم.

يتم التبديل بين العناصر المتدرجة بين التثبيت النسبي والتثبيت الثابت بناءً على موقع التمرير. قبل الوصول إلى الموقع المحدد في نطاق الرؤية، ستكون التثبيت نسبيًا، ثم ستلتصق في المكان نفسه (مثل position:fixed).

ملاحظة:Internet Explorer،Edge 15 و الإصدارات الأقدم لا يدعمون التثبيت المتدرج. Safari يتطلب مسبقًا -webkit- (انظر المثال أدناه). من أجل أن يصبح التثبيت المتدرج فعالًا، يجب تحديد top،right،bottom أو left على الأقل.

الصفحات ذات الصلة

دليل:توضيح CSS