מיקום אלמנטים | CSS

מוטי אורן

מדריך לקביעת מיקום לאלמנטים באמצעות CSS

--

בשביל לקבוע מיקום לאלמנטים אנו משתמשים בתכונה position.
הערך ברירת המחדל שהדפדפן משתמש בו לתכונה position הוא static, שאומר שהמיקום של האלמנט ייקבע לפי הזרימה הרגילה של הדף.

קיימים עוד ארבעה ערכים נוספים לתכונה position:

relative
absolute
fixed
sticky.

הערך relative קובע את מיקום האלמנט, ביחס למיקום המקורי שלו.

הערך absolute כשמו כן הוא, קובע ערך אבסולוטי (מוחלט) יחסית לאלמנט האב.

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

הערך sticky נכנס אם אינני טועה רק ב – CSS3 ומשמעותו 'דביק', כלומר, האלמנט יזוז ממקומו עם גלילת הדף עד שיגיע למיקום הגלילה שלו ואז ייהפך ל – fixed.

לשלושת הערכים relative absolute ו – fixed ישנם ארבע תכונות נלוות:

top – מרחק מהקצה העליון,
bottom – מרחק מהקצה התחתון,
left – מרחק מהקצה הימני,
right – מרחק מהקצה השמאלי.

ארבעת התכונות הנ"ל יכולות לקבל ערכים של פיקסלים, אחוזים ועוד.

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

בכדי לפתור את הבעיה הזו קיימת תכונה בשם: z-index. התכונה הזו קובעת את הסדר של שכבות האלמנטים, והיא מקבלת ערכים מספריים בשביל לקבוע את הסדר. אם נרצה שאלמנט כלשהו יקבל את המיקום העליון, ניתן לו בתכונה z-index את הערך המספרי הגדול מבין הערכים שקבענו לאלמנטים האחרים. לדוגמה: אם יש לנו אלמנטים a b ו – c ואנחנו רוצים שאלמנט a יהיה העליון ומתחתיו אלמנט b והכי למטה c, אנחנו ניתן להם את הערכים בסדר הזה. c יקבל 1, b יקבל 2 ואילו a יקבל 3.

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

/* This is a comment */