תחי ישראל - אין לנו ארץ אחרת

תחי ישראל -אין לנו ארץ אחרת

מדריך CSS מספר 16 - מיקום אבסולוטי

מחבר:
בתאריך:

 

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

נתחיל מלראות את המצב הרגיל שבו פסקה אחת נמצאת מעל לפסקה שנייה. לשם כך, נעתיק את הקוד הבא לקובץ ה-html:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="para_1">פסקה בשביל להסביר על מיקום</div>
    <div class="para_2">פסקה נוספת בשביל להסביר על מיקום </div> 
  </body>
</html>

הקוד מייצר שתי פסקאות.

נכתוב את הקוד הבא לגיליון העיצוב החיצוני, style.css:

.para_1 { background-color: yellow;
width: 250px;
height: 80px;
}
.para_2 { background-color: green;
width: 250px;
height: 80px;
}

משמעות הקוד שכל פסקה מקבלת צבע רקע, רוחב וגובה.

נריץ את קובץ ה-html על הדפדפן, ונראה את התוצאה:

מה שאנחנו רואים זה את המצב הרגיל שבו אלמנטים נמצאים אחד מעל לשני.

 

כיצד נשתמש במיקום אבסולוטי לסידור האלמנטים על הדף?

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

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

top: 50px;

• כדי למקם ביחס לחלקו השמאלי של הדפדפן נשתמש בתכונה left. בדוגמה מיקמנו את האלמנט 250 פיקסלים ימנית לחלק השמאלי של הדפדפן:

left: 250px;

• כדי למקם ביחס לחלקו הימני של הדפדפן נשתמש בתכונה right. לדוגמה:

right: 100px;

• כדי למקם ביחס לחלקו התחתון של הדפדפן נשתמש בתכונה bottom. לדוגמה:

bottom: 100px;

דבר נוסיף שצריך לעשות הוא לתת לאלמנט אורך ורוחב באמצעות width ו-height.

לסיכום, נכתוב את הקוד הבא לגיליון העיצוב החיצוני, style.css:

.para_1 { background-color: yellow;
width: 250px;
height: 80px;
}
.para_2 { background-color: green;
width: 250px;
height: 80px; 
position: absolute;
top: 50px;
left: 250px;
}

משמעות הקוד שאת האלמנט השני (הירוק) אנחנו מזיזים 50 פיקסלים יחסית לחלקו העליון של הדפדפן ו-250 פיקסלים ימנית לחלקו השמאלי של הדפדפן.

נריץ את קובץ ה-html על הדפדפן, ונראה את התוצאה:

 

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

 

 

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים

 

 

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

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

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

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

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

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

 

 

ענה על השאלה הפשוטה הבאה כתנאי להוספת תגובה:

מתי הוקמה המדינה?

 

תמונת המגיב

יאיר בתאריך: 25.02.2020

יוסי אולי כדאי שתיידע בתחילת הפוסט שכיום ישנם שיטות שונות למיקום אלמנטים באמצעות css (כגון Flexbox)

תמונת המגיב

יוסי בן הרוש בתאריך: 26.02.2020

קישור למדריך פלקס בוקס