z-index

خاصية ترتيب الطبقات z-index

خاصية z-index تقرر أي العناصر المتراكبة يظهر فوق الآخر — وتعمل فقط على العناصر ذات position أو داخل سياقات تراص.

عندما تتراكب العناصر (قوائم منسدلة، مودالات، شارات) يحسم z-index الأعلى رقمًا. الشرط الذي يفوّت على المبتدئين ساعات: **لا تعمل على عنصر static** — يحتاج position (غالبًا relative تكفي).

واللغز الأشهر: «كتبت 99999 وما زال تحت!» — سببه سياقات التراص Stacking Contexts: عناصر معينة (opacity أقل من 1، transform، filter…) تنشئ «عالمًا» داخليًا لا يستطيع أبناؤه تجاوز سقف أبيهم مهما كبرت أرقامهم. الحل نقل العنصر خارج ذلك السياق لا تضخيم الرقم.

الصياغة

.dropdown {
  position: absolute; /* شرط عمل z-index */
  z-index: 50;
}

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<style>
  .stack { position: relative; height: 110px; }
  .card { position: absolute; width: 130px; height: 80px; border-radius: 10px; color: white; padding: 8px; }
  .a { background: #7c5cff; top: 0;  left: 10px;  z-index: 2; }
  .b { background: #22d3ee; top: 25px; left: 70px; z-index: 1; }
</style>
<div class="stack">
  <div class="card a">z-index: 2</div>
  <div class="card b">z-index: 1</div>
</div>
<p>بدّل الرقمين في الكود وشاهد الانقلاب.</p>

النتيجة المباشرة:

أهم القيم

القيمة	الوظيفة
auto	الافتراضي — الترتيب حسب موقع العنصر في HTML
أرقام موجبة	الأعلى يفوز — اعتمد سلمًا منظمًا (10، 50، 100) لا أرقامًا عشوائية
أرقام سالبة	خلف المحتوى — خلفيات زخرفية (orbs هذا الموقع مثال!)

💡 نصائح عملية

نظّم طبقات مشروعك كمتغيرات: --z-dropdown: 50 و--z-modal: 100 — نهاية حرب الأرقام
z-index «لا يعمل»؟ فحصان: هل للعنصر position؟ وهل أب بينه وبين خصمه ينشئ سياق تراص؟

⚠️ أخطاء شائعة

سباق تسلح 999999 بدل فهم سياقات التراص
نسيان أن opacity وtransform على الأب يحبسان أبناءه في طبقته

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار CSS الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs