מיקום קבוע

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

ב-CSS, מיקום קבוע משאיר רכיב באותו מקום על המסך, בלי קשר לכמות הגלילה. כשמגדירים position: fixed;, הרכיב מוסר מהפריסה הרגילה, כך שרכיבים אחרים מתעלמים ממנו. הוא נשאר מקובע לחלון הדפדפן, ולכן הוא שימושי לכותרות, לכותרות תחתונות או לתפריטים שאמורים להיות גלויים תמיד.

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

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

position: fixed;: ההצהרה הזו קובעת את שיטת המיקום של הרכיב למיקום קבוע.

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

לדוגמה:

.header {
    position: fixed;
    top: 0;
    left: 0;
}

בדוגמה הזאת, האלמנט עם המחלקה header מקובע לחלק העליון של אזור התצוגה באמצעות position: fixed;, top: 0; ו־left: 0;.

אתגר

קל

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

כתוב כלל CSS שמכוון לרכיב <div> עם המחלקה header.
הגדר את המאפיין position של הרכיב .header לערך fixed.
הגדר את המאפיין top של הרכיב .header לערך 0 ואת המאפיין left לערך 0. כך תמקם את הכותרת בפינה השמאלית העליונה של אזור התצוגה.
הגדר את המאפיין width של הרכיב .header לערך 100% כדי שיימתח לאורך כל אזור התצוגה.
הגדר את המאפיין background-color של הרכיב .header לערך #fcc726 (צהוב זהוב) כדי שיהיה ניתן לראות אותו על רקע תוכן הדף.
הגדר את המאפיין text-align לערך center, כדי שהוא ייראה טוב יותר.

נסו בעצמכם

<html>
<head>
    <title>Fixed Positioning</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="header">This is the header</div>
    <p>This is some content below the header. Scroll down to see the fixed positioning in action.</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
</body>
</html>