יסודות Z-Index

חלק מהיחידה עיצוב באמצעות CSS במסלול ה-HTML של Coddy. שיעור 59 מתוך 76.

ב-CSS, המאפיין z-index קובע את סדר הערימה של רכיבים ממוקמים (רכיבים שהערך של position שלהם אינו static). כאשר רכיבים חופפים, z-index קובע איזה רכיב יופיע מעל ואיזה יופיע מאחור. רכיבים עם ערך z-index גבוה יותר נערמים לפני רכיבים עם ערך נמוך יותר.

הנה התחביר הבסיסי לשימוש במאפיין z-index:

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

position: relative; (או absolute, fixed או sticky): יש למקם את האלמנט כדי של-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 ממוקמים באופן מוחלט. מכיוון של-.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 נמצאת למטה.

נסו בעצמכם

<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>