מדריך CSS מספר 17 - מיקום יחסי
במדריך הקודם למדנו על מיקום אבסולוטי, שממקם את האלמנט יחסית לדפדפן. במדריך הנוכחי נלמד על מיקום יחסי שממקם את האלמנט ביחס למקומו הרגיל, ובסוף המדריך נסביר על הדרך המקובלת לשלב בין מיקום אבסולוטי ויחסי.
נתחיל מזה שנראה איך ממוקמים אלמנטים באופן רגיל בדף אינטרנט. לשם כך, נעתיק את הקוד הבא לקובץ ה-html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="para_1">פסקה בשביל להסביר על מיקום</div>
<div class="para_2">פסקה נוספת בשביל להסביר על מיקום</div>
<div class="para_1">עוד פסקה</div>
</body>
</html>
המשמעות של הקוד היא שאנחנו יוצרים 3 אלמנטים ששמנו בתוך div-ים.
כדי להוסיף רוחב וגובה לאלמנטים, נכתוב את הקוד הבא לגיליון העיצוב החיצוני, קובץ style.css:
.para_1 { background-color: yellow;
width: 250px;
height: 80px;
}
.para_2 { background-color: green;
width: 250px;
height: 80px;
}
משמעות הקוד שאנחנו נותנים לאלמנטים רוחב, גובה, וצבע רקע שונה לכל אחת מהמחלקות. חיוני לתת לאלמנטים שמעוניינים למקם אותם את התכונות של גובה ורוחב.
נריץ את קובץ ה-html על הדפדפן, ונראה את התוצאה:
אפשר לראות שבאופן רגיל האלמנטים ממוקמים אחד מתחת לשני.
קוד שממקם אלמנטים באופן יחסי
נשתמש בתכונה position: relative כדי להזיז את האלמנט השני (הירוק) ממיקומו הרגיל למיקום שאנחנו מעוניינים בו. כדי לראות איך זה עובד נכתוב את הקוד הבא לקובץ style.css:
width: 250px;
height: 80px;
}
.para_2 { background-color: green;
width: 250px;
height: 80px;
position: relative;
top: 100px;
left: 150px;
}
הוספנו לקוד את התכונה position:relative , ונתנו לה כיוונים של 100 פיקסלים למטה מהמיקום הרגיל של האלמנט באמצעות top:100px ו-150 פיקסלים ימינה מהמיקום הרגיל של האלמנט באמצעות left:150px.
נריץ את קובץ ה-html על הדפדפן, ונראה את התוצאה:
אנחנו יכולים לראות שהאלמנט הירוק עבר למיקום החדש, ושהמלבן שבו הוא ישב נשאר ריק.
כשמשתמשים בתכונה position חיוני להגדיר את הכיוונים, ואילה הם:
• top- כמה פיקסלים למטה מהמיקום הרגיל ימוקם האלמנט. לדוגמה: top:20px
• bottom- כמה פיקסלים למעלה מהמיקום הרגיל ימוקם האלמנט. לדוגמה: bottom:20px
• right- כמה פיקסלים שמאלה מהמיקום הרגיל ימוקם האלמנט.
• left- כמה פיקסלים ימינה מהמיקום הרגיל ימוקם האלמנט.
עוד דבר שאסור לשכוח הוא לתת לאלמנט רוחב וגובה באמצעות height ו-width.
סיכום מיקום אבסולוטי ומיקום יחסי
בעוד מיקום אבסולוטי ממקם את האלמנט ביחס לדפדפן, מיקום יחסי משנה את מיקומו של אלמנט ביחס למיקום הרגיל.
טיפ חשוב מאוד: כשמעצבים דפים משתמשים גם במיקום אבסולוטי וגם במיקום יחסי כדי למקם את האלמנטים בדף. טכניקה מקובלת היא למקם את האלמנט החיצוני באמצעות מיקום יחסי ואת האלמנטים הפנימיים באמצעות מיקום אבסולוטי. בדרך זו האלמנטים הפנימיים ממוקמים ביחס לאלמנט החיצוני, ולא ביחס לדפדפן.
במדריך הבא בסדרת ה-CSS נלמד כיצד לקבוע איזה מהאלמנטים יופיע בשכבה העליונה ואיזה מתחת.
אהבתם? לא אהבתם? דרגו!
0 הצבעות, ממוצע 0 מתוך 5 כוכבים
המדריכים באתר עוסקים בנושאי תכנות ופיתוח אישי. הקוד שמוצג משמש להדגמה ולצרכי לימוד. התוכן והקוד המוצגים באתר נבדקו בקפידה ונמצאו תקינים. אבל ייתכן ששימוש במערכות שונות, דוגמת דפדפן או מערכת הפעלה שונה ולאור השינויים הטכנולוגיים התכופים בעולם שבו אנו חיים יגרום לתוצאות שונות מהמצופה. בכל מקרה, אין בעל האתר נושא באחריות לכל שיבוש או שימוש לא אחראי בתכנים הלימודיים באתר.
למרות האמור לעיל, ומתוך רצון טוב, אם נתקלת בקשיים ביישום הקוד באתר מפאת מה שנראה לך כשגיאה או כחוסר עקביות נא להשאיר תגובה עם פירוט הבעיה באזור התגובות בתחתית המדריכים. זה יכול לעזור למשתמשים אחרים שנתקלו באותה בעיה ואם אני רואה שהבעיה עקרונית אני עשוי לערוך התאמה במדריך או להסיר אותו כדי להימנע מהטעיית הציבור.
שימו לב! הסקריפטים במדריכים מיועדים למטרות לימוד בלבד. כשאתם עובדים על הפרויקטים שלכם אתם צריכים להשתמש בספריות וסביבות פיתוח מוכחות, מהירות ובטוחות.
המשתמש באתר צריך להיות מודע לכך שאם וכאשר הוא מפתח קוד בשביל פרויקט הוא חייב לשים לב ולהשתמש בסביבת הפיתוח המתאימה ביותר, הבטוחה ביותר, היעילה ביותר וכמובן שהוא צריך לבדוק את הקוד בהיבטים של יעילות ואבטחה. מי אמר שלהיות מפתח זו עבודה קלה ?
השימוש שלך באתר מהווה ראייה להסכמתך עם הכללים והתקנות שנוסחו בהסכם תנאי השימוש.