CSS

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

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

التاريخ

19 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

841

المواضيع

24
الشروحات chevron_left CSS Layers Orders z-index chevron_left CSS
CSS Flex Box keyboard_arrow_down

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

</> 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.

z-index:value;
CSS z-index values

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

z-index:auto|number|initial|inherit;
ملاحظة
  • كلما زاد الرقم داخل القيمة المحددة في خاصية z-index كلما كان العنصر في الطبقات الأولي في لغة CSS.

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

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

CSS z-index auto

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

.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.

.pink 
{
  background:pink;
  width:300px;
  height:100px;
  position:absolute;
  top:0px;
  left:150px;
  z-index:3;
}
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.