ما هي خاصية z-index؟
z-index تُستخدم لتحديد ترتيب تراكب العناصر فوق بعضها البعض على المحور الرأسي (العمق) في الصفحة.
ببساطة:
- كلما كانت قيمة
z-indexأعلى، كلما كان العنصر أقرب للمشاهد (يظهر فوق غيره).
متى نحتاج إلى استخدام z-index؟
- عند تراكب عناصر مثل النوافذ المنبثقة (modals)
- القوائم المنسدلة (dropdown)
- الأدوات العائمة (floating buttons)
- البانرات والإشعارات
شروط استخدام z-index:
- يجب أن يكون للعنصر خاصية
positionغيرstatic، مثل:relativeabsolutefixedsticky
مثال عملي: عنصران يتراكبان
<!DOCTYPE html>
<html>
<head>
<style>
.box1, .box2 {
width: 200px;
height: 200px;
position: absolute;
top: 50px;
left: 50px;
}
.box1 {
background-color: #f8d7da;
z-index: 1;
}
.box2 {
background-color: #d1ecf1;
top: 100px;
left: 100px;
z-index: 2;
}
</style>
</head>
<body>
<div class="box1">Box 1 (z-index: 1)</div>
<div class="box2">Box 2 (z-index: 2)</div>
</body>
</html>
النتيجة:
Box 2سيظهر فوقBox 1لأنه يملكz-indexأعلى.
ماذا يحدث إذا تساوت القيم؟
إذا كانت z-index متساوية، يتم تحديد من يظهر أولاً حسب ترتيب العناصر في HTML:
- العنصر الذي يأتي بعد في الكود سيظهر فوق الذي قبله.
z-index بقيمة سالبة:
z-index: -1;
يضع العنصر خلف كل العناصر الأخرى، حتى خلف الخلفية إن وُجدت.
استخدام عملي مع نوافذ منبثقة:
<style>
.overlay {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 1000;
}
.popup {
position: fixed;
top: 30%;
left: 30%;
width: 300px;
padding: 20px;
background: white;
z-index: 1001;
}
</style>
<div class="overlay"></div>
<div class="popup">نافذة منبثقة</div>
popupتظهر فوقoverlayلأنz-index: 1001>1000.
نصائح مهمة:
- لا تضع قيم z-index عشوائيًا. استخدم أرقام منطقية (100، 200، 300...).
- تأكد من أن العنصر لديه
positionغيرstatic. - جرّب استخدام
z-indexمعhoverأوfocusعند تصميم القوائم أو المربعات.
الواجب العملي:
- أنشئ 3 مربعات متراكبة، كل منها بلون مختلف، وغيّر ترتيبها باستخدام
z-index. - صمّم نافذة منبثقة تظهر فوق محتوى الصفحة.
- جرب تعيين
z-index: -1لعناصر خلفية معينة وشاهد الفرق.