מה זה position?

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

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

שימוש במאפיין position

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

דוגמה לשימוש ב-position

להלן דוגמה לשימוש במאפיין position:

שימושים מתקדמים

באמצעות position ניתן ליצור עיצובים מותאמים אישית ולשלוט בדיוק במיקום של האלמנטים בדף.

    
          <div style="position: relative; width: 200px; height: 200px; background-color: lightblue;">
            <div style="position: absolute; top: 10px; left: 10px; width: 100px; height: 100px; background-color: lightcoral;">
              אלמנט עם position:absolute
            </div>
          </div>