מדריך  CSS למיקום אלמנטים בדף

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

מיקום סטטי (Static Positioning)

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

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

img
{
  position:static;
}

מיקום יחסי (Relative Positioning)

אלמנט שמיקומו הוגדר כמיקום יחסי, כלומר שהערך שאותו התכונה position תקבל הוא: relative מאפשר קביעת מיקומו המדויק באמצעות התכונות: top, bottom, right, left יחסית למקום שבו היה אמור לשכון אלמלא הגדרנו את מיקומו באמצעות תכונות אלה. כך למשל בדוגמת הקוד הבאה נמקם תמונה במרחק 20 פיקסלים שמאלה מהמקום שבו הייתה אמורה להיות במצב סטטי:

img
{
    position: relative;
    left: 20px;
}

מיקום אבסולוטי (Absolute Positioning)

אלמנט שמיקומו הוגדר כמיקום אבסולוטי, כלומר שהערך שאותו התכונה position תקבל הוא: absolute מאפשר קביעת מיקומו המדויק באמצעות התכונות: top, bottom, right, left.  המיקום נקבע בתוך האלמנט שבתוכו נמצא האלמנט שלנו. כלומר אם נגדיר למשל עבור אלמנט כלשהו שימוקם במקום אבסולוטי כלשהו יהיה זה מקום בתוך האלמנט שהאלמנט שלנו שוכן בתוכו. אם האלמנט שלנו אינו שוכן בתוך אלמנט אחר אזי הכוונה היא למיקום האבסולוטי בתוך האלמנט <html>.

בדוגמה הבאה נמקם תמונה בפינה הימנית העליונה של האלמנט שבתוכו היא שוכנת:

img
{
    position: absolute;
    right: 0;
    top: 0;
}

מיקום אלמנטים חופפים

אלמנטים הממוקמים מחוץ לזרימה הטבעית של המסמך שבתוכו הם נמצאים יכולים להיות ממוקמים כך שמיקומם יחפוף את מיקומם של אלמנטים אחרים. במקרה זה ישנה חשיבות רבה גם לתכונה z-index שבאמצעותה נוכל לקבוע באיזו שכבה ימוקם כל אלמנט ובדרך זו נחליט איזה אלמנט ייראה במקרה של חפיפה (עוד על עבודה בשכבות ראה גם במדריך CSS לעבודה בשכבות).

בדוגמה הבאה נמקם שתי פסקאות זו מעל זו ונקבע איזו תהיה מעל השניה:

<p style="position:relative; font-size:100px; z-index:2;">שכבה 1</p>
<p style="position:relative; top:-190; left:5; color:red; font-size:100px; z-index:1">שכבה 2</p>

תוצאת דוגמת הקוד שלמעלה תגרום לתוצאה שאותה ניתן לראות באיור הבא:

Overlapping Elements With CSS

 
 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש