תיעוד CSS עם דוגמאות להרצה: Position

Q: איך ממקמים אלמנט באופן absolute ביחס להורה שלו?

תנו להורה position: relative; ולילד position: absolute; עם היסטים כמו top: 0; right: 0;. בלי הורה ממוקם, הילד ממוקם ביחס לדף.

Q: מה ההבדל בין מיקום relative ל-absolute?

relative משאיר את האלמנט בזרימה ורק מזיז את המקום שבו הוא מצויר, ומשאיר מאחור את המקום המקורי שלו. absolute מוציא אותו מהזרימה וממקם אותו ביחס לאב הממוקם שלו.

Q: למה position: sticky לא עובד?

בדרך כלל אחד משלושה דברים: לא הוגדר top (או היסט אחר), לאחד האבות יש overflow: hidden או auto והוא הופך למיכל הגלילה, או שההורה של האלמנט הדביק לא גבוה ממנו, כך שאין מקום להיצמד.

Q: מה ההבדל בין fixed ל-sticky?

fixed יוצא מהזרימה ומוצמד ל-viewport (אלא אם לאחד האבות יש transform או filter). sticky נשאר בזרימה ונגלל כרגיל עד שהוא מגיע להיסט שלו, ואז נצמד כל עוד ההורה שלו עדיין על המסך.

position: absolute בדוגמה אחת

אלמנט עם מיקום absolute מורם מהזרימה הרגילה וממוקם עם top, right, bottom ו-left. ההיסטים האלה נמדדים מהאב הקרוב ביותר שיש לו position שאינו static, ולכן ההורה מקבל position: relative:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Absolute inside relative</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .card {
      position: relative;          /* the reference box */
      width: 260px; padding: 20px;
      background: #f3f4f6; border: 2px solid #111827;
    }
    .badge {
      position: absolute;
      top: 8px;
      right: 8px;
      padding: 2px 8px;
      background: #dc2626; color: white; font-size: 12px; border-radius: 999px;
    }
  </style>
</head>
<body>
  <div class="card" id="card">
    <span class="badge" id="badge">New</span>
    <h3>Card title</h3>
    <p>The badge sits 8px from the top and right edges of the card.</p>
  </div>
</body>
</html>

מחקו את position: relative מ-.card והתג קופץ לפינה הימנית העליונה של כל הדף, כי כבר אין לו אב ממוקם. השורה האחת הזאת מסבירה את רוב השאלות של "position absolute לא עובד".

דברים שכדאי לדעת על אלמנטים עם absolute:

הם לא תופסים מקום. הכותרת והפסקה נפרסות כאילו התג לא קיים.
הרוחב שלהם מתכווץ לפי התוכן שלהם, אלא אם מגדירים width או גם left וגם right.
ההיסטים נמדדים עד קצה הריפוד של הבלוק המכיל, בתוך הגבול שלו.

חמשת ערכי position

ערך	בזרימה?	ההיסטים נמדדים מ	שימוש נפוץ
`static` (ברירת מחדל)	כן	ההיסטים נזנחים	אלמנטים רגילים
`relative`	כן, המקום שלו נשמר	המיקום הרגיל שלו עצמו	עוגן לילדים עם absolute, הזזות קטנות
`absolute`	לא	האב הממוקם הקרוב ביותר (או הדף)	תגים, tooltips, שכבות על, כפתורי סגירה
`fixed`	לא	ה-viewport	כותרות, כפתורי צ'אט, סרגלי עוגיות
`sticky`	כן	מיכל הגלילה שלו, ברגע שהוא מגיע להיסט	כותרות טבלה, כותרות מקטעים, סרגלי צד

position: relative

אלמנט עם מיקום relative נשאר במקום שבו היה בזרימה. ההיסטים מזיזים את המקום שבו הוא מצויר, אבל המקום המקורי שלו נשאר שמור, כך ששום דבר סביבו לא זז:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Relative</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 8px; }
    .row div { width: 80px; padding: 16px 0; text-align: center; background: #bfdbfe; border: 2px solid #2563eb; }
    .row .moved {
      position: relative;
      top: 20px;
      left: 20px;
      background: #fde68a; border-color: #f59e0b;
    }
  </style>
</head>
<body>
  <div class="row">
    <div>1</div>
    <div class="moved" id="moved">2</div>
    <div id="three">3</div>
  </div>
</body>
</html>

קופסה 2 מצוירת 20px למטה ו-20px ימינה, וחופפת את קופסה 3, אבל קופסה 3 לא זזה: היא עדיין משאירה מקום לקופסה 2 במקום המקורי שלה. לבדו, relative משמש רק לעתים רחוקות להזזת דברים; התפקיד העיקרי שלו הוא להיות קופסת הייחוס לילדים עם absolute.

היסטים ו-inset

top, right, bottom ו-left מקבלים אורכים, אחוזים (מהבלוק המכיל) ו-auto. הקיצור inset קובע את ארבעתם באותו סדר כמו margin:

.overlay {
  position: absolute;
  inset: 0;              /* top: 0; right: 0; bottom: 0; left: 0; */
}
.corner {
  position: absolute;
  inset: auto 16px 16px auto;  /* bottom right corner, 16px in */
}

הגדרת צדדים נגדיים מותחת את האלמנט: left: 0; right: 0 הופך אותו לרחב כמו הבלוק המכיל. inset: 0 על ילד עם absolute היא הדרך הסטנדרטית לכסות כרטיס בשכבת על.

מרכוז עם absolute ו-transform

top: 50%; left: 50% מציב את הפינה השמאלית העליונה של האלמנט במרכז. translate(-50%, -50%) מזיז אותו אחר כך אחורה בחצי מהגודל שלו:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Absolute centering</title>
  <style>
    .stage { position: relative; height: 180px; background: #e5e7eb; }
    .center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 12px 20px;
      background: #2563eb; color: white; font-family: system-ui, sans-serif;
    }
  </style>
</head>
<body>
  <div class="stage" id="stage"><div class="center" id="c">Centered</div></div>
</body>
</html>

flexbox ו-grid ממרכזים בפשטות רבה יותר כשהאלמנט יכול להישאר בזרימה; הדף על מרכוז div משווה את כל השיטות.

position: fixed

אלמנט fixed ממוקם ביחס ל-viewport ונשאר שם בזמן שהדף נגלל:

.chat-button {
  position: fixed;
  bottom: 16px;
  right: 16px;
}

שתי מלכודות. אלמנט fixed לא תופס מקום, ולכן כותרת fixed מכסה את ראש הדף אלא אם מוסיפים padding-top ל-body. ואם לאחד האבות יש transform, filter או perspective, האב הזה הופך לקופסת הייחוס במקום ה-viewport, והאלמנט נגלל יחד איתו.

position: sticky

אלמנט sticky נגלל כרגיל עד שהוא מגיע להיסט שלו, ואז נצמד שם עד שסוף ההורה שלו נגלל הלאה. גללו את הקופסה למטה:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sticky</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .scroller { height: 220px; overflow-y: auto; border: 2px solid #111827; }
    h3 {
      position: sticky;
      top: 0;
      margin: 0; padding: 8px 12px;
      background: #2563eb; color: white;
    }
    p { margin: 0; padding: 10px 12px; border-bottom: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <div class="scroller" id="scroller">
    <section>
      <h3>A</h3>
      <p>Adams</p><p>Allen</p><p>Alvarez</p><p>Anderson</p><p>Arnold</p>
    </section>
    <section>
      <h3>B</h3>
      <p>Baker</p><p>Bell</p><p>Brooks</p><p>Brown</p><p>Bryant</p>
    </section>
    <section>
      <h3>C</h3>
      <p>Campbell</p><p>Carter</p><p>Clark</p><p>Collins</p><p>Cooper</p>
    </section>
  </div>
</body>
</html>

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

כש-sticky לא נצמד, בדקו את אלה:

אין היסט. position: sticky לא עושה כלום בלי top, bottom, left או right.
אב עם overflow: hidden, auto או scroll. הוא הופך למיכל הגלילה, ואם הוא לא באמת נגלל, שום דבר לא נצמד. השתמשו ב-overflow: clip אם צריך רק להסתיר גלישה.
הורה שלא גבוה מהאלמנט הדביק. אין בתוכו מקום להיצמד.
הורה flex או grid שמותח אותו. בשורת flex, הוסיפו align-self: flex-start לסרגל הצד הדביק.

טעויות נפוצות

לשכוח position: relative על ההורה של אלמנט עם absolute.
שימוש ב-absolute לפריסת הדף. אלמנטים עם absolute מתעלמים זה מזה ומהתוכן, ולכן טקסט חופף במסכים קטנים. השתמשו ב-flexbox או ב-grid לפריסה וב-absolute לקישוטים קטנים.
היסטים על אלמנט static. top: 10px לא עושה כלום בלי position.
מאבק על איזה אלמנט נמצא למעלה. אלמנטים ממוקמים חופפים מסודרים לפי z-index.
כותרת fixed שמסתירה תוכן. הוסיפו ריפוד לדף, או scroll-padding-top כדי שקישורי עוגן ינחתו מתחתיה.

שאלות נפוצות

מה position: absolute עושה?

הוא מוציא את האלמנט מהזרימה הרגילה (שאר האלמנטים מתנהגים כאילו הוא לא קיים) וממקם אותו עם top, right, bottom ו-left, שנמדדים מהבלוק המכיל שלו: האב הקרוב ביותר שה-position שלו אינו static.

איך ממקמים אלמנט באופן absolute ביחס להורה שלו?

תנו להורה position: relative; ולילד position: absolute; עם היסטים כמו top: 0; right: 0;. בלי הורה ממוקם, הילד ממוקם ביחס לדף.

מה ההבדל בין מיקום relative ל-absolute?

relative משאיר את האלמנט בזרימה ורק מזיז את המקום שבו הוא מצויר, ומשאיר מאחור את המקום המקורי שלו. absolute מוציא אותו מהזרימה וממקם אותו ביחס לאב הממוקם שלו.

למה position: sticky לא עובד?

בדרך כלל אחד משלושה דברים: לא הוגדר top (או היסט אחר), לאחד האבות יש overflow: hidden או auto והוא הופך למיכל הגלילה, או שההורה של האלמנט הדביק לא גבוה ממנו, כך שאין מקום להיצמד.

מה ההבדל בין fixed ל-sticky?

fixed יוצא מהזרימה ומוצמד ל-viewport (אלא אם לאחד האבות יש transform או filter). sticky נשאר בזרימה ונגלל כרגיל עד שהוא מגיע להיסט שלו, ואז נצמד כל עוד ההורה שלו עדיין על המסך.

מושגים קשורים