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

המאפיין מאפשר הזזת אלמנטים רבים - תגי טקסט (למשל <span> או <p>), תמונה (<img>) וכמובן אלמנטים של <div> העונים למודל התיבה.

מיקום האלמנט נעשה ביחידות מידה (פיקסלים, ס"מ, מ"מ, em וכו') יחסית לנקודה ידועה כלשהי על המסך. נקודה זו יכולה להיות פינה עליונה של המסך, פינה של אלמנט אחר בו נמצא האלמנט המוזז או יחסית למיקומו שנקבע על פי הזרימה השוטפת של הקוד.

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

מאפייני הציר האופקי

הציר האופקי נקבע ביחידות מידה על אחד משני מאפיינים: left ו-right.

  • להזזה ימינה בגודל של 50px מצידו השמאלי של האלמנט בו נמצאת התיבה, נכתוב: left: 50px.
  • מתן ערך שלילי יסיט את התיבה ימינה מהצד השמאלי.
  • להזזה שמאלה בגודל של 50px מצידו הימני של האלמנט בו נמצאת התיבה, נכתוב: right: 50px.
  • מתן ערך שלילי יסיט את התיבה שמאלה מהצד הימני.

 מאפייני הציר האנכי

הציר האופקי נקבע ביחידות מידה על אחד משני מאפיינים: top ו-bottom.

  • להזזה מטה בגודל של 50px מקצהו העליון של האלמנט בו נמצאת התיבה, נכתוב: top: 50px.
  • מתן ערך שלילי יסיט את התיבה מעלה מהקצה העליון.
  • להזזה מעלה בגודל של 50px מקצהו התחתון של האלמנט בו נמצאת התיבה, נכתוב: bottom: 50px.
  • מתן ערך שלילי יסיט את התיבה מטה מהקצה התחתון.

מאפיין המיקום - position

מאפיין המיקום הקובע את נקודת הייחוס של הזזת האלמנט, הוא - position.

למאפיין זה יש 4 ערכים: static, fixed, absolute ו-relative.

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

מיקום קבוע - הערך fixed

הערך fixed קובע את מיקום האלמנט יחסית לחלון המסך ואינו מושפע מגלגול הדף מעלה ומטה או ימינה ושמאלה.

אלמנט שמיקומו נקבע ע"י הערך fixed מתנהג כאילו איננו חלק מהזרימה השוטפת של קוד ה-HTML והדף מתנהג כאילו האלמנט כלל אינו קיים. הדף יזרום תחתיו ויוסתר על ידו (אלא אם כן נגדיר לתיבה מיקום "אחורי" - מאחורי הטקסט, ואז המידע שבדף ינוע מעל האלמנט. ראו מאפיין z-index).

דוגמא לתיבה המוגדרת כ-fixed:

.fixed_box {
position: fixed;
top: 200px;
left: 250px;
width: 200px;
height: 200px;
background-color: #ffffcc;
}

תוצאת דוגמא זו אפשר לראות ע"י לחיצה על הכפתורים הבאים וגלילת הדף לאחר מכן.

מיקום יחסי - relative

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

האלמנט שיזוז יוצב במקומו החדש תוך שהוא "דורס" את האלמנטים האחרים הנמצאים שם, אבל השטח שהוקצה עבורו על פי זרימת קוד ה-HTML נשמר. ז"א אם ניקח תמונה ונסיט אותה ימינה ב 200px, יווצר חלל של 200px במקום בו היא היתה אמורה להיות.

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

<p style="font-size: 26px;text-align: center;">Israel
<span style="color: #ff0000; position: relative; left: -72px; top: -1px;">Israel</span>Israel
</p>

Israel Israel Israel

הערך relative משמש במקרים רבים לצורך אכסון אלמנטים בעלי ערך מוחלט למאפיין: postion: absolute

מיקום מוחלט - absolute

אלמנטים שמיקומם הוגדר כ-"מיקום מוחלט" מוצבים (על פי ערכי המיקום שהוגדרו להם) יחסית לאלמנט האב הראשון שיש לו מאפיין מיקום כלשהו (אלמנט שבתוכו הם נמצאים).

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

אם האלמנט המוחלט לא נמצא בתוך אלמנט אחר שיש לו מאפיין מיקום, מיקומו ייקבע יחסית לתג <html>.

אלמנט בעל מיקום מוחלט, לא מתחשב באלמנטים אחרים בדף, והוא יכול לעמוד מעליהם.

הוספת תכנים אחרים לדף, נמשכת כאילו האלמנט אינו קיים.

דוגמא לאלמנט בעל מיקום מוחלט:

.absolute_box {
     postion: absolute;
     top: 100px;
     left: 150px;
     background-color: navy;
     color: white;
     } 
אל השיעור הקודם אל השיעור הבא