📚 فهم خاصية z-index في CSS: دليلك للتحكم في الطبقات 🎯

تخيل أن لديك مجموعة من الأوراق الملونة فوق مكتبك. كيف تقرر أي ورقة تظهر فوق الأخرى؟ في عالم تصميم الويب، نواجه سيناريو مشابهاً عندما تتداخل العناصر فوق بعضها البعض. هنا يأتي دور خاصية z-index، وهي الأداة السحرية التي تمنحك التحكم الكامل في ترتيب هذه "الطبقات"! 🪄

🔍 ما هي خاصية z-index؟

z-index هي خاصية في CSS تتحكم في الترتيب الرأسي (العمق) للعناصر المتداخلة على الصفحة. فكر فيها كالمحور Z في نظام إحداثيات ثلاثي الأبعاد:

  • المحور X: يتحكم في الوضع الأفقي (اليسار واليمين).
  • المحور Y: يتحكم في الوضع الرأسي (الأعلى والأسفل).
  • المحور Z: يتحكم في العمق (الأمام والخلف) – وهذا هو دور z-index! 🧭

ببساطة، z-index يحدد أي عنصر يظهر فوق وأي عنصر يظهر تحت عندما يتداخلان.

⚠️ متى نحتاج إلى استخدام z-index؟

لا تعمل خاصية z-index على جميع العناصر! هناك شرط أساسي يجب توافره:

الشرط: يجب أن يكون للعنصر خاصية position محددة

تعمل z-index فقط على العناصر التي لديها خاصية position بقيمة غير static (وهي القيمة الافتراضية). القيم الصالحة هي:

  • position: relative;
  • position: absolute;
  • position: fixed;
  • position: sticky;
/* المثال التالي لن يعمل لأن position هي static (الافتراضية) */
.box {
    position: static; /* ❌ z-index لن يعمل هنا */
    z-index: 10;
}

/* المثال التالي سيعمل بشكل صحيح */
.box {
    position: relative; /* ✅ شرط أساسي لـ z-index */
    z-index: 10;
}

📊 كيف تعمل قيم z-index؟

قيمة z-index هي رقم صحيح (يمكن أن يكون سالباً أيضاً). قاعدة العمل بسيطة جداً:

📈 كلما زاد الرقم، كلما ظهر العنصر في طبقة أعلى (أكثر للأمام).

.العلبة-الحمراء {
    position: absolute;
    z-index: 1;
    background-color: red;
}

.العلبة-الزرقاء {
    position: absolute;
    z-index: 2; /* ✅ ستظهر فوق العلبة الحمراء لأن 2 > 1 */
    background-color: blue;
}

.العلبة-الخضراء {
    position: absolute;
    z-index: 3; /* ✅ ستظهر فوق العلبتين السابقتين */
    background-color: green;
}

القيمة الافتراضية

إذا لم تحدد z-index لعنصر ما، فإن قيمته الافتراضية هي auto، وسيتم ترتيبه تلقائياً بناءً على ترتيبه في كود HTML (العناصر اللاحقة تظهر فوق السابقة إذا تداخلت).

🎨 مثال عملي: صناديق ملونة متداخلة

لنطبق ما تعلمناه بمثال بسيط وواضح. سننشئ ثلاثة صناديق ملونة تتداخل مع بعضها، ونتحكم في ترتيب ظهورها.

<!DOCTYPE html>
<html lang="ar">
<head>
    <style>
        .container {
            position: relative;
            width: 300px;
            height: 200px;
            margin: 50px auto;
        }

        .box {
            position: absolute;
            width: 150px;
            height: 150px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }

        .box1 {
            background-color: #ff6b6b; /* أحمر */
            top: 20px;
            left: 20px;
            z-index: 1; /* سيكون في الخلف */
        }

        .box2 {
            background-color: #4ecdc4; /* أزرق فاتح */
            top: 50px;
            left: 50px;
            z-index: 2; /* سيكون في الوسط */
        }

        .box3 {
            background-color: #ffe66d; /* أصفر */
            top: 80px;
            left: 80px;
            z-index: 3; /* سيكون في المقدمة */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box box1">العلبة 1 (z-index: 1)</div>
        <div class="box box2">العلبة 2 (z-index: 2)</div>
        <div class="box box3">العلبة 3 (z-index: 3)</div>
    </div>
</body>
</html>

💡 ماذا يحدث في هذا المثال؟

  • العلبة الحمراء (z-index: 1) ستكون في الخلف.
  • العلبة الزرقاء (z-index: 2) ستظهر فوق الحمراء.
  • العلبة الصفراء (z-index: 3) ستظهر في المقدمة فوق الجميع.

🔄 تغيير الترتيب ديناميكياً

جمال z-index أنه يمكنك تغييره باستخدام JavaScript أو حتى بـ :hover في CSS لإنشاء تأثيرات تفاعلية!

.box {
    position: relative;
    width: 100px;
    height: 100px;
    z-index: 1;
    transition: z-index 0.3s ease; /* تأثير سلس للتغيير */
}

/* عند تمرير الماوس، نجعل العلبة تظهر في المقدمة */
.box:hover {
    z-index: 100; /* ✅ قيمة عالية جداً لتظهر فوق كل شيء */
}

🚫 مشكلة شائعة: z-index لا يعمل!

إذا وجدت أن z-index لا يعطيك النتيجة المتوقعة، فتحقق من هذه النقاط:

  1. هل العنصر لديه position غير static؟ ✅ هذا هو السبب الأكثر شيوعاً.
  2. هل هناك عنصر أب (Parent) يحدد سياق مكدس (Stacking Context) جديد؟ هذا موضوع متقدم قليلاً، ولكن ببساطة: أحياناً يخلق العنصر الأب نظام ترتيب خاصاً لعناصره الداخلية.

🎯 خلاصة الدرس

  • z-index يتحكم في الترتيب الرأسي (العمق) للعناصر المتداخلة. 🏗️
  • شرط العمل: يجب أن يكون للعنصر position بقيمة غير static. 📝
  • القاعدة: الرقم الأكبر = طبقة أعلى (أكثر للأمام). 📈
  • القيمة الافتراضية هي auto. 🔄
  • استخداماته: القوائم المنسدلة، النوافذ المنبثقة (Modals)، الأزرار العائمة، والعديد من التأثيرات البصرية. 💫