انتقل إلى محتوى الدرس

CSS Layers Orders z-index خاصية z-index في لغة CSS

سوف تتعلم في هذا الدرس كيفية عرض عناصر HTML علي المتصفح وكيف يمكن تغيير الوضع الأفتراضي إلي ثبات العنصر مع تحريك scroll وما هي الطبقات داخل صفحة الويب في لغة CSS.

1 صفوف تعليمية
لغة CSS
3,100 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تُستخدم خاصية z-index في لغة CSS لترتيب الطبقات الناتجة عن خاصية position في صفحة الويب, يمكن أن تتقدم طبقة عن أخري وتكون بالأعلي ويمكن أن تتأخر طبقة أخري أي عدد من الطبقات.


قيم خاصية position في لغة CSS:

  • auto ترتيب طبقة العنصر يكون يساوي ترتيب العنصر parent الأب وهذه هي القيمة الأفتراضية
  • number رقم صحيح وهو رقم الطبقة وكلما كان العنصر له قيمة أكبر كلما تقدمت الطبقة للأمام.

HTML Layers

أعلي طبقه هي طبقة لون blue ثم طبقة orange ثم طبقة pink.

sort HTML Layers

أعلي طبقه هي طبقة لون pink ثم طبقة blue ثم طبقة orange.

CSS z-index syntax

طريقة كتابة خاصية z-index في لغة CSS.

HTML
z-index:value;

CSS z-index values

قيم خاصية z-index في لغة CSS.

HTML
z-index:auto|number|initial|inherit;