מיקום מוחלט

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

ב-CSS, מיקום מוחלט מאפשר לך להציב רכיב בדיוק במקום הרצוי בתוך המכולה שלו.

כשמגדירים position: absolute;, האלמנט מוסר מהפריסה הרגילה, כך שאלמנטים אחרים מתנהגים כאילו הוא לא שם. הוא ממקם את עצמו ביחס לאב הקדמון הקרוב ביותר שיש לו הגדרת מיקום (שאינה static). אם אין כזה, הוא ממקם את עצמו ביחס לדף.

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

.parent {
    position: relative; /* הפוך את אלמנט האב לאלמנט אב ממוקם */
}

.child {
    position: absolute;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

.parent: בורר ה-CSS שמכוון לרכיב ההורה. הגדרת position: relative; מאפשרת למקם רכיבי צאצא במיקום מוחלט.

.child: בורר ה-CSS שמכוון לרכיב שברצונך למקם במיקום מוחלט.

position: absolute;: ההצהרה הזו מגדירה את שיטת המיקום של הרכיב כמוחלטת ומסירה אותו מזרימת המסמך הרגילה.

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

לדוגמה:

.parent {
    position: relative;
    width: 400px;
}

.child {
    position: absolute;
    top: 50px;
    left: 100px;
    width: 200px;
}

בדוגמה הזו, הרכיב .parent מוגדר כאב קדמון ממוקם באמצעות position: relative;. הרכיב .child ממוקם באופן מוחלט באמצעות position: absolute;, ומיקומו מוגדר ל־50 פיקסלים מלמעלה ו־100 פיקסלים משמאל לאב הקדמון הממוקם הקרוב ביותר שלו (הרכיב .parent).

אתגר

קל

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

כתוב כלל CSS שמכוון לרכיב <div> עם המחלקה parent. הגדר את המאפיין position שלו לערך relative כדי להפוך אותו לאב קדמון ממוקם.
כתוב כלל CSS שמכוון לרכיב <div> עם המחלקה box2.
הגדר את המאפיין position של הרכיב .box2 לערך absolute.
הגדר את המאפיין top של הרכיב .box2 לערך 30px ואת המאפיין right לערך 20px. כך התיבה תמוקם במרחק של 30 פיקסלים מהחלק העליון ו-20 פיקסלים מהצד הימני של האב הקדמון הממוקם שלה (parent).

נסו בעצמכם

<html>
<head>
    <title>Absolute Positioning</title>
    <style>
        .parent {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        .box2 {
            width: 150px;
            height: 120px;
            background-color: lightgreen;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="parent">
        <div class="box1">Box 1</div>
        <div class="box2">Box 2</div>
    </div>
</body>
</html>