מיקומי שכבות CSS: fixed, static, relative, absolute

שתף בפייסבוק

טוויטר

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

דוגמא לקוד שכבה ב-CSS בתוך הגדרות CSS:

.samplestyle{position:fixed; top:5px; right:5px;}

דוגמא לקוד שכבה בתוך קוד ה-HTML:

<div style="position: fixed; width: 160px; height: 600px; z-index: 1; left: 0" id="layer1"> content</div>

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

למעשה, לשכבות יש ארבע אפשרויות לתצורת שכבה:

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

relative - שכבה הממוקמת באופן יחסי לקודמתה, שמוגדרת נקודת ה-0.

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

static - ברירת המחדל של שכבות שלא הוגדר להם מיקום (position) ומשמעותה זרימה רגילה עם שאר האובייקטים בדף.

 

שתף בפייסבוק

טוויטר