position היא הגדרת CSS כמו display או color, אבל יש לה השפעה נרחבת במיוחד על האלמנט עצמו ועל אלמנטים אחרים, ובנוסף כל אחד מהערכים האפשריים של position מתנהג באופן שונה לחלוטין, עם השלכות שונות לחלוטין, ולכן הקדשתי לה פרק בפני עצמה.
השם "position" קצת מטעה. מדובר על איך להבין את האלמנט, איך האלמנט ממקם את עצמו בעמוד.
יחד עם ההגדרה position באות 5 הגדרות CSS נוספות:
- top, right, left, bottom – במדריך קראתי להן גם “הגדרות מיקום אבסולוטיות”, ובכל אחת מהאפשרויות שposition מקבלת – ההגדרות הללו מקבלות משמעות קצת שונה.
- z-index – משפיע על מיקום האלמנטים מבחינת העומק. אם רוחב המסך הוא ציר הX וגובה המסך הוא ציר הY, הרי שהעומק, ואיזה אלמנט מסתיר איזה אלמנט אחר – זה ציר הZ. ההגדרה z-index מאפשרת לנו לשלוט על העומק של הפריטים, כך שפריט יכסה פריטים אחרים. משמעותי בעיקר כשמדברים על position fixed או absolute.
אז נתחיל.
position: static
זו ההגדרה הדיפולטיבית. במידה ונרצה לדרוס הגדרת position בהגדרת הדיפולט – זו ההגדרה הדרושה לנו.
חשוב לשים ❤️שאלמנט עם ההגדרה position: static הוא היחיד שלא ניתן לתת לו הגדרות מיקום אבסולוטיות ולא z-index.
position: fixed = אלמנט נעוץ
אלמנטים עם position: fixed הם אלמנטים "מרחפים" או "נעוצים", והם לא זזים כאשר הגולש גולל את העמוד כלפי מעלה או מטה.
משתמשים fixed לדוגמא עבור אייקוני שיתוף/הדפסה/נגישות שצפים לצד המסך, header נעוץ שנשאר צמוד לחלון הגולש גם בגלילה, פופאפים שאנחנו רוצים שייפתחו תמיד מול עיני הגולש, בלי קשר לכמה גללו את העמוד, ועוד.
מאחר ואלמנט עם position fixed מתייחס לחלון של הדפדפן, כאשר מגדירים לו top, right, left, bottom – הכוונה ביחס למסך. לדוגמה אם הגדרתי right: 30px – האלמנט יהיה תקוע על המסך במרחק 30 פיקסלים מצד ימין, גם כשכל האלמנטים האחרים מתרכזים איפשהו בבמרכז המסך. כנ"ל אם ניתן לו הגדרת width: 100% – המשמעות היא מאה אחוזים של החלונית ממנה צופים.
השפעה נוספת שיש לposition: fixed היא, שמרגע שנתנו לאלמנט את הגדרת הposition – הוא מרחף בעמוד, ושאר האלמנטים בעמוד לא יודעים על קיומו. גם הוא לא יודע על קיומו של שום אלמנט אחר בעמוד, ומתייחס רק לגבולות חלון הדפדפן. הוא לא תופס מקום בעמוד, אלמנטים אחרים לא שומרים לו מקום, גם אם הוא אלמנט גדול מאד.
header נעוץ
כאשר משתמשים בהגדרה fixed כדי לנעוץ למסך את הheader של האתר, מאחר ואלמנטים אחרים בעמוד לא מכירים בקיומו (כי אלמנטים אחרים לא מכירים בקיומו של אלמנט עם fixed כמו שמפורט למעלה) – תוכן העמוד יתחיל מיד בראש הbody, והheader יסתיר את תחילת תוכן העמוד.
לכן יש לתת לbody את ההגדרה padding-top או margin-top וכדו', כדי להרחיק את תוכן העמוד מתחילת הbody עד לנקודה שבה מסתיים גובה הheader הנעוץ. לדוגמה אם גובה הheader הוא 100 פיקסלים, אני אוסיף לbody את ההגדרה: padding-top: 100px, וככה תוכן העמוד יוצג אחרי איפה שהHEADER מסתיים, ולא יוסתר.
כנ"ל אם נועצים איזושהי שכבה בתחתית המסך, צריך להוסיף לbody שוליים תחתונים.
שימוש בz-index
כאשר הHEADER, או פופאפ או כל רכיב אחר – נעוצים על המסך, אני ארצה שהם יופיעו מעל אלמנטים אחרים ויכסו אותם. לדוגמה הפופאפ שעלה על המסך צריך לעמוד מעל כל האלמנטים האחרים, שאני לא אראה איזשהו טקסט או תמונה מעל הפופאפ. לכן נוסיף לפופאפ או לHEADER וכדו' את ההגדרה z-index עם ערך גבוה ביותר. לדוגמה
z-index: 9999;ככה אני יכולה להיות בטוחה שהוא יסתיר אלמנטים אחרים שיש בדף ולא יהיה מצב מוזר שאלמנטים שאמורים להיות מוסתרים – מוצגים.
position: sticky
סטיקי מלשון סטיק = דבק. זהו אלמנט דביק, שמתנהג בדיוק כמו השכפולים מבית הספר שניסית להדביק עם דבק סטיק. פעם הם נדבקו ופעם לא…
גם אלמנט סטיקי הוא אלמנט שמשלב את שתי ההתנהגויות. לפעמים הוא נעוץ כמו position: fixed ולפעמים לא.
כדי לקבוע מתי ובאיזו נקודה האלמנט יינעץ – אנחנו משתמשים בהגדרות המיקום האבסולוטיות.
לדוגמה
position: sticky;
top: 140px;נניח שמדובר באלמנט שנמצא לי איפהשהוא באמצע כתבה ארוכה.
כאשר אני גוללת את העמוד והטקסט – האלמנט הזה ייגלל יחד עם שאר האלמנטים שלפניו/אחריו ויתנהג בדיוק כמוהם. רק כאשר הוא יגיע ל140 פיקסלים מהחלק העליון של החלון – הוא יינעץ ויתנהג כמו fixed.
אם אגלול חזרה למטה, הוא יחזור חזרה למקום המקורי שלו ולא יישאר נעוץ.
כנ"ל אם אני מגדירה לו bottom: 100px, כל עוד הוא לא הגיע לחלק התחתון של המסך למרחק 100 פיקסלים מתחתית המסך – הוא יהיה נעוץ.
משתמשים בsticky כאשר רוצים פריטים שנעוצים למסך רק בחלק מהזמן. לדוגמה כשיש לי פוסט ארוך ולידו תפריט צד עם תוכן העניינים, ואני רוצה שכאשר גוללים להמשך הכתבה – עדיין יראו את תוכן העניינים, ומצד שני – לא יראו אותו תמיד. במקרה הזה סטיקי ממש פותר את הבעיה, כי הוא עושה בדיוק את זה. פשוט נגדיר לסיידבר top כלשהו שזו הנקודה שבה אנחנו רוצים שהוא יינעץ, והשאר – יקרה מאליו.
בעבר היה צריך JS כדי לממש את ההתנהגות הזו, אבל היום – הקסם קיים בCSS 🙂
position: relative
די דומה לstatic. אלמנטים עם position: relative מתנהגים בדיוק כמו כל אלמנט אחר שאנחנו מכירות וששמנו בעמודים עד היום.
ההבדל היחיד הוא שאפשר להגדיר לrelative גם הגדרות מיקום אבסולוטיות, למרות שלא מומלץ כי האפקט המתקבל עשוי לשבש נראות של רכיבים.
ובנוסף לrelative אפשר להוסיף גם z-index, שזה דווקא כן שימושי.
תכל'ס ההצדקה היחידה לקיומו של position: relative היא ההגדרה position: absolute שאותה נכיר מיד.
position: absolute
לפני כל מילה אחרת על הposition הזה חובה לומר:יש רק סיבה אחת בעולם שתגרום לך לתת לאלמנט את ההגדרה position: absolute. והסיבה הזו היא, כאשר את רוצה שהוא לא יתפוס מקום בעמוד. שום מצב אחר לא מצדיק לתת את ההגדרה הזו לאלמנטים.מצבים לדוגמה:טולטיפ, דרופדאון (תפריט שנפתח במעבר עכבר), שכבת רקע חצי שקופה על תמונה, אייקון של וידאו על קובית תמונה (מצב שאפשר לממש גם עם FLEX בדרך כלל), גלרית תמונות שכולן צריכות לעמוד באותה נקודה (ובעצם לא מכירות אחת את השניה) וכדו'.
ברגע שניתן לאלמנט הגדרת absolute, אלמנטים אחרים (מלבד הצאצאים שלו) לא יכירו בו ובמקומו. כלומר, גובהו לא ייחשב כחלק מהגובה של האב שלו, הרוחב שלא לא נחשב כך שאחרים תופסים את מקומו. הוא באיזשהו מובן מרחף בעמוד. עד כאן די דומה לposition: fixed.
אבל בעוד position: fixed מתייחס אחרי המסך, ולכן right: 0 ייצמד לימין של המסך – אלמנט עם ההגדרה absolute מתייחס אחרי האבא הקרוב אליו שיש לו הגדרת position שאינה static. (הרחבה על מה זה אבא רלטיבי תבוא בהמשך).
התנהגות הגדרות מיקום אבסולוטיות
כאשר יש לאלמנט absolute ואנחנו משתמשים בהגדרות מיקום אבסולוטיות – הן תהיינה ביחס לאב הרלטיבי. לדוגמה top: 0 – יצמיד את החלק העליון של האלמנט האבסולוטי לחלק העליון של האבא הרלטיבי.
אם אני רוצה שהחלק התחתון של האלמנט האבסולוטי ייצמד לחלק העליון של האבא הרלטיבי – תכלס מה שמעניין אותי זה לא top אלא bottom, ולכן אני אשתמש בהגדרה bottom: 100%, שאומרת: תצמיד בבקשה את החלק התחתון שלי (אני = האלמנט האבסולוטי) ל100% מתחתית האבא הרלטיבי. כלומר – איפה שהוא מסתיים אם מתחילים מלמטה, כלומר – מעליו.
אב רלטיבי
אב רלטיבי של אלמנט אבסולוטי הוא לא דווקא האלמנט שבHTML הוא האבא שלו, אלא האלמנט הקרוב אליו מבחינת ההיררכיה העולה של אבא, אבא של אבא, אבא של אבא של אבא וכו', אבל בתנאי שיש לו את ההגדרה של position עם ערך שאיננו static.
אם אין בנמצא אלמנט כזה – ילך אחרי ה body.
האבא הרלטיבי הוא אב שיש לו את אחת מההגדרות הבאות:
- position: relative;
- position: absolute;
- position: fixed;
- position: sticky;
רק אבא למעלה בהיררכיה שיש לו את אחת מההגדרות הללו (כן, אבסולוט יכול להיות אבא של אבסולוט אחר) – נחשב כאבא רלטיבי.
ולמה זה חשוב מי האבא הרלטיבי?
כי כל הגדרות המיקום של top, right, left, bottom, וכן רוחב וגובה באחוזים – יהיו ביחס לאותו אבא רלטיבי.
להקלת ההבנה נניח מצב כזה:
<body>
<div id="first-div">
<div id="second-div">
<div id="absolute-element">Hello!</div>
</div>
</div>
</body>
#first-div{
width: 300px;
}
#second-div{
width: 100px;
margin-top: 100px;
}
#absolute-element{
position: absolute;
width: 100%;
}(אני ממליצה לך בחום להעתיק את הקטע הזה ולהריץ בדפדפן כדי להבין את ההתנהגות בצורה המדוייקת ביותר).
כדיפולט, #absolute-element יקבל את כל הרוחב של הbody.
אבל אם נוסיף לאלמנט #first-div את ההגדרה של position: relative, הרי שabsolute-element יקבל רוחב של 300 פיקסלים, למרות שהאב שלו הוא 100 פיקסלים בלבד. ורק אם נוסיף ל#second-div את ההגדרה position: relative – רק אז #absolute-element יקבל רוחב 100 פיקסלים. וזה כי הוא לא מתייחס אחר האבא שלו אלא אחרי האב הדיפולטיבי הקרוב.
אותו הדבר לגבי המיקום שלו.
במידה ואין ל #second-div את ההגדרה של position: relative – הרי שהאלמנט #absolute-element יעמוד למעלה, בתחילת הbody, וזה בגלל שיש לו הגדרה של top:0px – מיקום אבסולוטי שלא קשור למקום המקורי שלו. (בשונה מmargin-top שכן היה משפיע בתזוזה מהלמעלה של #second-div בלבד).
ברגע שנגדיר את #second-div כרלטיבי – #absolute-element ייעמד 100 פיקסלים מתחת לתחילה הbody, בדיוק בנקודת ה0 של אביו הרלטיבי.
עכשיו כל השאלה היא איזה position צריך לתת לאבא כדי שהאלמנט absolute יתייחס אליו.
כאן נכנס לתמונה position relative. כי אם אתן הגדרות אחרות -fixed, absolute או sticky – תהיינה השפעות התנהגויות נוספות שאנחנו לא רוצים. לכן במצבים כאלה ניתן לאבא relative, ואז ההשפעה היחידה שתהיה היא – שהוא יהיה אבא רלטיבי.