انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 61
دورة لغة CSS

ترتيب الطبقات في لغة CSSCSS Layers Orders z-index

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

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
3
الأمثلة
4
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
3,020
محتوى الدرس
في هذا الدرس 3تصفّح المواضيع

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

تُستخدم خاصية 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;

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

تُستخدم خاصية z-index مع القيمة auto في لغة CSS لعمل ترتيب تلقائي للطبقات بناء علي ترتيب العنصر داخل عنصر parent الأب في صفحة الويب وهي القيمة الأفتراضية في لغة CSS.

جرّب بنفسك

CSS z-index auto

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

HTML 
.pink 
{
  background:pink;
  width:300px;
  height:100px;
  position:absolute;
  top:0px;
  left:150px;
}
جرّب بنفسك

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

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


ملعومات حول خاصية z-index في لغة CSS:

  • يمكن إستخدام اي رقم صحيح كلما زاد الرقم كلما كانت الطبقة في المقدمة.
  • من الممكن إستخدام أرقام سالبة لترتيب عنصر معين لكي يتم تأخيره لخلف الطبقات الأخري.
جرّب بنفسك

CSS z-index number

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

HTML 
.pink 
{
  background:pink;
  width:300px;
  height:100px;
  position:absolute;
  top:0px;
  left:150px;
  z-index:3;
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…