Position בCSS

Position בCSS

נכון לCSS 3 יש מספר ערכי position, כל אחד עם מאפייניו ושיגיונותיו.

position: static

נתחיל בהגדרה הדיפולטיבית.

  • האלמנט מתחשב באלמנטים אחרים על המסך ואלמנטים אחרים על המסך מתחשבים בו
  • לא ניתן לתת לו הגדרות מיקום אבסולוטיות (הרחבה בפוסט אחר בעז"ה)

במידה ונרצה לדרוס הגדרת position בהגדרת הדיפולט – זו ההגדרה הדרושה לנו.

בנוסף –  הגדרת הstatic היא ההגדרה היחידה שלא מקבלת את z-index.

position: relative

די דומה לstatic.

  • האלמנט מתחשב באלמנטים אחרים על המסך ואלמנטים אחרים מתחשבים בו
  • ניתן להגדיר לו הגדרות מיקום אבסולוטיות
  • משמש כ"אב" לאלמנט absolute (הרחבה בהמשך)

position: absolute

  • האלמנט לא מתחשב באלמנטים אחרים, ואלמנטים אחרים לא מתחשבים בו.
  • ניתן לתת לו הגדרות מיקום אבסולוטיות.
  • מתייחס אחר האב הרלטיבי הקרוב אליו בהגדרות כמו רוחב וגובה באחוזים ומיקום אבסולוטי.

נרחיב קצת אודות ההתנהגות.

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

כברירת מחדל, האלמנט האבסולוטי מאבד התנהגויות אחרות שמגיעות יחד עם display, לדוגמא במידה והוא block, שהרוחב שלו אמור להיות 100% של האבא (ראו עוד בפוסט אודות display) – הרוחב של אלמנט אבסולוטי הוא הרוחב של האלמנטים שבתוכו, אלא אם נקבע לו אחרת באמצעות ההגדרה width.

אב רלטיבי

במידה ונתנו לאלמנט אבסולוטי הגדרה באחוזים, לדוגמא width 100% – הוא לא יקבל בדווקא את הרוחב המלא של האבא שלו, אלא את של האלמנט הקרוב אליו מבחינת ההיררכיה העולה של אב-סב-אב של סב וכו' שיש לו את ההגדרה של position: relative. אם אין בנמצא אלמנט כזה – ילך אחרי הbody.

להקלת ההבנה נניח מצב כזה:

דוגמת קוד להבנת position absolute

כדיפולט, #myElement יקבל את כל הרוחב של הbody.

ברגע שנוסיף אלמנט #firstDiv את ההגדרה של position: relative: – הרי שmyElement יקבל רוחב של 300 פיקסלים, למרות שהאב שלו הוא 100 פיקסלים בלבד. ורק אם נוסיף ל#secondDiv את ההגדרה position: relative – רק אז #myElement יקבל רוחב 100 פיקסלים. וזה כי הוא לא מתייחס אחר האבא שלו אלא אחרי האב הדיפולטיבי הקרוב.

ואותו הדבר לגבי המיקום שלו. במידה ואין ל #secondDiv את ההגדרה של position: relative – הרי ש#myElement יעמוד למעלה, בתחילת הbody, וזה בגלל שיש לו הגדרה של top: 0px – מיקום אבסולוטי שלא קשור למקום המקורי שלו. (בשונה מmargin-top שכן היה משפיע בתזוזה מהלמעלה של #secondDiv בלבד. הרחבה בעז"ה בפוסט על מיקומים אבסולוטיים ושאינם).

ברגע שנגדיר את #secondDiv כרלטיבי – #myElement ייעמד 100 פיקסלים מתחת לתחילה הbody, בדיוק בנקודת ה0 של אביו הרלטיבי.

position: fixed = אלמנט נעוץ

  • האלמנט לא מתחשב באלמנטים אחרים, ואלמנטים אחרים לא מתחשבים בו.
  • ניתן לתת לו הגדרות מיקום אבסולוטיות.
  • מתייחס אחר החלון של הדפדפן

position fixed מזכיר במידת מה את רעהו האבסולוטי. גם הוא בדומה לabsolute לא רואה ממטר את כל מי שמאחוריו או מצדדיו, אך בניגוד לabsolute – בהגדרות שתלויות בסובבים, כמו אחוזים והגדרות אבסולוטיות – הוא לא מתייחס אחרי הרלטיבי הקרוב אלא אחרי חלון הדפדפן. כלומר – במידה וניתן לו מיקום אבסולוטי לדוגמא של right: 0px – הוא ייצמד ימינה לחלונית הדפדפן, גם כשכל האלמנטים האחרים מתרכזים איפשהו בבמרכז המסך. כנ"ל אם ניתן לו הגדרת width:100% – המשמעות היא מאה אחוזים של החלונית ממנה צופים.

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

position: sticky

הגדרה שמשלבת בין fixed לrelative. לא נפרט עליה כאן כי התמיכה שלה בדפדפנים השונים עדיין לא משהו…  במקום זאת, ועד שההגדרה תתחיל להיתמך, לפעמים רוצים אלמנט סטיקי – דביק. כלומר, איזשהו אלמנט שחלק מהזמן נעוץ וחלק מהזמן לא נעוץ. לדוגמא סיידבר שלא מתחיל בתחילת הדף, וכשמגיעים בגלילה למצב שבו רוצים להקפיא אותו – שם הוא ננעץ. במצב הזה משתמשים במשחק של position absolute/position fixed. כאן תוכלו לקרוא איך לבנות אלמנט מהסוג הזה.

 

עד כאן להפעם. אם יש שאלות – טופס ההערות ממתין בדיוק לזה 🙂

 

כתוב/כתבי תגובה