أساسيات Z-Index

جزء من قسم Styling with CSS في رحلة HTML على Coddy — الدرس 59 من 76.

في CSS، تتحكم خاصية z-index في ترتيب التكديس للعناصر المحددة الموضع (العناصر التي لها موضع بخلاف static). عندما تتداخل العناصر، يحدد z-index أي عنصر يظهر في المقدمة وأي عنصر يظهر في الخلف. يتم تكديس العناصر التي لها قيمة z-index أعلى أمام العناصر ذات القيمة الأقل.

إليك الصيغة الأساسية لاستخدام خاصية z-index:

selector {
    position: relative; /* أو absolute، أو fixed، أو sticky */
    z-index: value;
}

position: relative; (أو absolute، أو fixed، أو sticky): يجب أن يكون العنصر متموضعاً (positioned) لكي يكون لـ z-index تأثير.

value: قيمة عددية صحيحة تمثل ترتيب التكديس. يتم تكديس العناصر ذات القيم الأعلى أمام العناصر ذات القيم الأقل. يمكن أن تكون القيمة موجبة أو سالبة أو صفراً.

على سبيل المثال:

.box1 {
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 2;
}

.box2 {
    position: absolute;
    top: 70px;
    left: 70px;
    z-index: 1;
}

في هذا المثال، يتم وضع كل من .box1 و .box2 بشكل مطلق (absolutely). وبما أن .box1 لديه قيمة z-index أعلى، فسيتم ترتيبه أمام .box2 عندما يتداخلان.

التحدي

سهل

لقد تم تزويدك بمستند HTML يحتوي على ثلاثة أقسام متداخلة (<div>) بالفئات box1 و box2 و box3. مهمتك هي استخدام خاصية z-index للتحكم في ترتيب تكديس هذه العناصر. اتبع الخطوات أدناه:

اكتب قاعدة CSS تستهدف عنصر <div> بالفئة box1. قم بتعيين خاصية position الخاصة به إلى absolute، و top إلى 0، و left إلى 0، و z-index إلى 3.
اكتب قاعدة CSS تستهدف عنصر <div> بالفئة box2. قم بتعيين خاصية position الخاصة به إلى absolute، و top إلى 20px، و left إلى 20px، و z-index إلى 2.
اكتب قاعدة CSS تستهدف عنصر <div> بالفئة box3. قم بتعيين خاصية position الخاصة به إلى absolute، و top إلى 40px، و left إلى 40px، و z-index إلى 1.

لاحظ كيف تؤثر قيم z-index على ترتيب تكديس المربعات، حيث يكون box1 في الأعلى و box3 في الأسفل.

ورقة مرجعية

تتحكم خاصية z-index في ترتيب تكديس العناصر المتموضعة (positioned elements). تظهر العناصر ذات قيم z-index الأعلى أمام العناصر ذات القيم الأقل.

الصيغة الأساسية:

selector {
    position: relative; /* or absolute, fixed, or sticky */
    z-index: value;
}

المتطلبات:

يجب أن يكون للعنصر خاصية position غير static
يمكن أن تكون القيمة موجبة، سالبة، أو صفراً
القيم الأعلى تُكدس أمام القيم الأقل

مثال:

.box1 {
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 2;
}

.box2 {
    position: absolute;
    top: 70px;
    left: 70px;
    z-index: 1;
}

جرّب بنفسك

<html>
<head>
    <title>Z-Index Basics</title>
    <style>
        .box1 {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        .box2 {
            position: absolute;
            width: 150px;
            height: 150px;
            background-color: lightgreen;
        }
        .box3 {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: lightcoral;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="box1">Box 1</div>
    <div class="box2">Box 2</div>
    <div class="box3">Box 3</div>
</body>
</html>