CSS Layers Orders z-index
ترتيب الطبقات في لغة CSS
سوف تتعلم في هذا الدرس كيفية عرض عناصر HTML علي المتصفح وكيف يمكن تغيير الوضع الأفتراضي إلي ثبات العنصر مع تحريك scroll وما هي الطبقات داخل صفحة الويب في لغة CSS.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
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;
}
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
