الطبقات Layers

ترتيب العناصر في طبقات باستخدام الخاصية z-index

عادةً ما تعتبر صفحات HTML ثنائية الأبعاد ، لأن النصوص والصور والعناصر الأخرى مرتبة على الصفحة دون تداخل. ومع ذلك بالإضافة إلى مواضعها الأفقية والرأسية ، يمكن ترتيب الصناديق على طول المحور z وكذلك التحكم في ترتيبها أي واحدة فوق الأخرى باستخدام خاصية CSS z-index. تحدد هذه الخاصية مستوى الترتيب للصندوق الذي تكون قيمة الخاصية position له واحة من التالية : absolute أو fixed أو relative.
يتم التعبير عن موضع المحور z لكل طبقة على أنه عدد صحيح يمثل ترتيب العناصر للعرض. يعلو العنصر ذو القيمة الأكبر للخاصية z-index العنصر ذو القيمة الأصغر.
يمكن أن تساعدك الخاصية z-index على إنشاء تخطيطات صفحات ويب أكثر تعقيدًا. يوضح المثال التالي كيفية إنشاء طبقات في في لغة CSS.

مثال

تشغيل

img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}

مثال آخر لمزيد من التوضيح:

مثال

تشغيل

div#myBox {
position: absolute;
background-color: lightyellow;
z-index: 4;
}