CSS Z-index ترتيب طبقات العناصر
CSS - الخاصية z-index
🔸 تُستخدم خاصية z-index لتحديد ترتيب العناصر عند تراكبها فوق بعضها البعض (مثل الطبقات). كلما زادت القيمة، زاد اقتراب العنصر من "المقدمة".
🧠 كيف تعمل z-index؟
لكي تعمل z-index، يجب أن يكون للعنصر position غير static، مثل relative أو absolute أو fixed أو sticky.
🧪 مثال على z-index
<!DOCTYPE html>
<html>
<head>
<style>
.box1 {
position: absolute;
left: 20px;
top: 20px;
z-index: 1;
background-color: red;
width: 100px;
height: 100px;
}
.box2 {
position: absolute;
left: 40px;
top: 40px;
z-index: 2;
background-color: blue;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
📌 في هذا المثال، المربع الأزرق box2 يظهر فوق المربع الأحمر box1 لأن له قيمة z-index أكبر.
📌 ملاحظات مهمة
- القيم الأعلى تعني ظهور العنصر في الأمام.
- إذا لم يتم تحديد
z-index، يتم اعتبار القيمة الافتراضية 0. - يمكن أن تكون القيمة سالبة، مثل
z-index: -1;، مما يجعل العنصر خلف العناصر الأخرى. - الـ
z-indexلا يؤثر إلا إذا كان للعنصرpositionمختلف عن static.
💡 استخدامات شائعة
- جعل النوافذ المنبثقة (modals) فوق باقي العناصر.
- إظهار قائمة منسدلة فوق بقية المحتوى.
- ضبط ترتيب عناصر متراكبة مثل الصور أو الطبقات في تصميم معقد.
تعليقات
إرسال تعليق