ما هي خاصية z-index؟
تُستخدم z-index لتحديد ترتيب طبقات العناصر فوق بعضها البعض (على المحور z). أي عنصر بـ z-index أعلى يظهر فوق العناصر ذات قيمة أقل.
ملاحظة مهمة:
z-indexلا يعمل إلا إذا كان العنصر يملكpositionغيرstatic.
القيم:
- رقم موجب = يظهر فوق العناصر ذات الرقم الأقل.
- رقم سالب = يظهر خلف العناصر الأخرى.
- كلما كانت القيمة أعلى، كلما اقترب العنصر من المقدمة.
مثال:
<!DOCTYPE html>
<html>
<head>
<style>
.box {
position: absolute;
width: 200px;
height: 200px;
color: white;
padding: 20px;
font-size: 18px;
}
.box1 {
background-color: #4CAF50;
top: 40px;
left: 40px;
z-index: 1;
}
.box2 {
background-color: #2196F3;
top: 80px;
left: 80px;
z-index: 2;
}
.box3 {
background-color: #f44336;
top: 120px;
left: 120px;
z-index: 3;
}
</style>
</head>
<body>
<div class="box box1">Box 1 (z-index: 1)</div>
<div class="box box2">Box 2 (z-index: 2)</div>
<div class="box box3">Box 3 (z-index: 3)</div>
</body>
</html>
ملاحظات هامة:
- الـ
z-indexلا يُطبق على عنصر بدونposition: relativeأوabsoluteأوfixedأوsticky. - ترتيب العناصر مهم جدًا عند وجود عناصر متداخلة مثل:
- نوافذ منبثقة.
- صور تغطي محتوى.
- قوائم منسدلة.
مثال عملي توضيحي:
تخيل زرًا يظهر فوق نافذة، نحتاج هنا لـ z-index:
.modal {
position: fixed;
z-index: 10;
}
.overlay {
position: fixed;
z-index: 5;
}
button.close {
position: absolute;
z-index: 15;
}
الواجب العملي:
- أنشئ 3 صناديق بألوان مختلفة متداخلة باستخدام
position: absolute. - غيّر ترتيبها باستخدام
z-indexولاحظ التأثير. - جرّب إزالة
positionولاحظ أنz-indexلن يعمل.