الطبقات في CSS

يمكن دمج خاصية z-index مع خاصية position لإنشاء تأثير طبقات يشبه Photoshop.

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

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

كل طبقة في المحور z تمثل عددًا يوضح ترتيب التداخل في التمثيل.

يمكن لميزة z-index إنشاء تنسيق صفحة معقدة أكثر. إليك مثال على كيفية إنشاء طبقات في CSS.

.box{
　　width: 150px;
　　height: 150px;
　　opacity: 0.9;
　　position: absolute;　　　　　　　　　　　　　　　　　　　　　　　
　　top: 30px;
　　left: 30px;
}
.red{
　　background: #ff0000;
　　z-index: 1;
}
.green{
　　background: #00ff00;
　　z-index: 2;
}
.blue{
　　background: #0000ff;
　　z-index: 3;
}

النتيجة بعد التنفيذ كالتالي:

نستخدم z-index لترتيب التداخل النمط، ونحتاج إلى نمط التثبيت المطلق فيDIV + CSS لتنسيق النص، ونستطيع استخدام left وright للتحديد، من خلال القيم المختلفة لـ z-index لتحقيق ترتيب التداخل في الطبقات.