יסודות המיקום

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

ב-CSS, מיקום הוא אוסף של מאפיינים שמאפשרים לך לשלוט במיקום של רכיבים בדף אינטרנט. כברירת מחדל, רכיבים ממוקמים בהתאם לזרימה הרגילה של מסמך ה-HTML. עם זאת, באמצעות מיקום ב-CSS, ניתן להוציא רכיבים מהזרימה הרגילה ולמקם אותם במיקומים מסוימים ביחס לרכיב המכיל אותם או לאזור התצוגה (האזור הגלוי של חלון הדפדפן).

יש כמה ערכים למאפיין position, ולכל אחד מהם התנהגות משלו:

static: זהו ערך ברירת המחדל. מיקום האלמנט נקבע בהתאם לזרימה הרגילה של המסמך. למאפיינים top, right, bottom ו־left אין השפעה.

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

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

fixed: האלמנט מוסר מהזרימה הרגילה וממוקם ביחס לאזור התצוגה. הוא נשאר מקובע במקומו גם כשגוללים את הדף.

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

selector {
    position: value;
}

value: התנהגות המיקום הרצויה (למשל, static, relative, absolute, fixed, sticky).

אתגר

קל

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

כתוב כלל CSS שמכוון לרכיב <div> עם המחלקה container. הגדר את המאפיין position שלו ל-relative. כך הוא יהפוך לאב קדמון ממוקם עבור רכיבי הצאצא שלו.
כתוב כלל CSS שמכוון לרכיב <div> עם המחלקה box. הגדר את המאפיין position שלו ל-absolute. כך הוא יוצא מהזרימה הרגילה ומאפשר לך למקם אותו ביחס לאב הקדמון הממוקם הקרוב ביותר שלו (ה-container).
הגדר את המאפיין top של הרכיב .box ל-50px ואת המאפיין left ל-100px. כך התיבה תמוקם במרחק של 50 פיקסלים מלמעלה ו-100 פיקסלים משמאל לאב הקדמון הממוקם שלה (ה-container).

נסו בעצמכם

<html>
<head>
    <title>Positioning Basics</title>
    <style>
        .container {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>