נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

לחיצה חוזרת ונשנית על המקש Tab תעביר אתכם בין הקישורים והאזורים השונים בעמוד.

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

מדריך 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 על הדפדפן, ונראה את התוצאה:

הדגמת המיקום הרגיל של אלמנטים בדף בשביל מדריך CSS

אפשר לראות שבאופן רגיל האלמנטים ממוקמים אחד מתחת לשני.

 

קוד שממקם אלמנטים באופן יחסי

נשתמש בתכונה position: relative כדי להזיז את האלמנט השני (הירוק) ממיקומו הרגיל למיקום שאנחנו מעוניינים בו. כדי לראות איך זה עובד נכתוב את הקוד הבא לקובץ style.css:

.para_1 { background-color: yellow;
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 נלמד כיצד לקבוע איזה מהאלמנטים יופיע בשכבה העליונה ואיזה מתחת.

 

 

 

הוסף תגובה חדשה

 

= 7 + 8