מיקום יחסי

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

ב-CSS, מיקום יחסי הוא שיטת מיקום שמאפשרת למקם רכיב ביחס למיקום הרגיל שלו בזרימת המסמך. כאשר מגדירים לרכיב position: relative;, הוא נשאר בזרימה הרגילה, אך אפשר להשתמש במאפיינים top, right, bottom ו-left כדי להזיז אותו ממיקומו המקורי.

הנה התחביר הבסיסי לשימוש במיקום יחסי:

selector {
    position: relative;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

position: relative;: ההצהרה הזו מגדירה את שיטת המיקום של הרכיב כיחסית.
top, right, bottom, left: המאפיינים האלה מציינים את ההיסט של הרכיב ממיקומו הרגיל. אפשר להשתמש בערכים חיוביים או שליליים, שצוינו בפיקסלים (px), ביחידות em (em), באחוזים (%) או ביחידות CSS תקינות אחרות.

לדוגמה:

.box {
    position: relative;
    top: 20px;
    left: 30px;
}

בדוגמה הזו, האלמנט עם המחלקה box ימוקם 20 פיקסלים למטה ו-30 פיקסלים ימינה מהמיקום הרגיל שלו בזרימת המסמך. המקום שהוא תפס במקור יישמר, ואלמנטים אחרים לא יזרמו אל תוך המקום הזה.

אתגר

קל

ניתן לך מסמך HTML עם חלוקה (<div>) שמכילה שלוש חלוקות צאצא (<div>) עם המחלקות box1, box2 ו-box3. המשימה שלך היא להשתמש במיקום יחסי כדי להזיז את הרכיב box2. בצע את השלבים הבאים:

כתוב כלל CSS שמכוון לרכיב <div> עם המחלקה box2.
הגדר את המאפיין position של הרכיב .box2 לערך relative.
הגדר את המאפיין top של הרכיב .box2 לערך 20px ואת המאפיין left לערך 40px. כך התיבה תזוז 20 פיקסלים למטה ו-40 פיקסלים ימינה מהמיקום הרגיל שלה.

נסו בעצמכם

<html>
<head>
    <title>Relative Positioning</title>
    <style>
        .container {
            width: 400px;
            height: 200px;
            border: 1px solid black;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: lightgreen;
        }
        .box3 {
            width: 100px;
            height: 100px;
            background-color: lightcoral;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="box1">Box 1</div>
        <div class="box2">Box 2</div>
        <div class="box3">Box 3</div>
    </div>
</body>
</html>