✔️ position CSS Style Property

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


static

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

relative

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

sticky

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

absolute

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

fixed

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