המיקום של רכיבי ה-HTML ממלא תפקיד חיוני בארגון רכיבי דף האינטרנט. ליתר דיוק, ניתן להתאים את מיקום האלמנטים על ידי שימוש ב-CSS ' עמדה ' תכונה. ניתן לשייך מאפיין זה למאפייני היסט, כגון מאפיינים עליון, שמאל, ימין ותחתון, המספקים ערכים ספציפיים להתאמת הרכיב בעמוד. אולם, ה ' מוּחלָט ” ניתן להתאים את האלמנטים הממוקמים ביחס לאלמנט הממוקם הקרוב ביותר.
פוסט זה יסביר את המיקום המוחלט של CSS.
נכס 'עמדה' של CSS
ה ' עמדה ניתן להשתמש במאפיין ב-CSS כדי להתאים את מיקום האלמנט. ערכים שונים של מאפיין המיקום הם קבועים, מוחלטים, יחסיים, סטטיים ודביקים. ערכים אלה מוגדרים עם מאפייני ההיסט, כגון עליון, ימין, שמאל ותחתון, להתאמת מיקום האלמנט.
כיצד ליישם מיקום מוחלט של CSS?
ניתן ליישם את המיקום המוחלט של האלמנט באמצעות ה-CSS ' עמדה 'נכס עם הערך' מוּחלָט '. האלמנט עם המיקום המוחלט מותאם בהתאם לאלמנט האב הממוקם הקרוב ביותר שלו. אבל אם האב הקדמון אינו ממוקם, הוא יתכוונן ביחס לחלק הגוף של המסמך.
דוגמא
בואו נבין את הרעיון עם דוגמה מעשית.
שלב 1: צור קובץ HTML
בקובץ HTML, בתוך אלמנט body, הוסף div עם שם המחלקה ' רָאשִׁי '. לאחר מכן, בתוך ה-div שנוצר, הוסף תג HTML המשויך לתכונות הבאות:
-
- ' src ' מספק קישור לתמונה.
- ' מעמד ' משמש ב-CSS כדי לסגנן את האלמנטים.
- ' הכל ' תכונה מציינת את הטקסט שיופיע במקום התמונה אם התמונה לא מצליחה להיטען בעמוד.
- ' הכל תכונה ” מציינת את הטקסט שיופיע בעמוד במקום התמונה אם התמונה לא מצליחה להיטען בעמוד.
לאחר מכן, הוסף div נוסף המכיל את הכותרת והרכיבים h1 ו-p של הפסקה:
< div מעמד = 'רָאשִׁי' >< div מעמד = 'תוֹכֶן' >
< img src = 'images/linuxlogo.png' מעמד = 'בית' הכל = 'לוגו לינוקס' רוֹחַב = '80 פיקסלים' >
< h1 > המיקום המוחלט של ה-CSS h1 >
< ע > שלום צוות Linuxhint ! ע >
div >
div >
ב-CSS, משתמשים בכמה מאפייני סטיילינג כדי לקשט את רכיבי ה-HTML.
שלב 2: סגנון 'כל' האלמנטים
* {משפחת גופנים: ורדנה, ז'נבה, טהומה, sans-serif;
}
רכיבי HTML מעוצבים באמצעות ' משפחת גופן 'נכס עם הערך' ורדנה, ז'נבה, טהומה, סן-סריף '. רשימת ערכים זו מבטיחה שאם הדפדפן לא תומך בסגנון הראשון, הסגנון השני יוחל.
שלב 3: סגנון 'בית' div
.בית {מיקום: מוחלט;
למעלה: 50px;
שמאל: 45px;
}
להלן המאפיינים שהוחלו על ' בית ' div:
-
- ' עמדה ' מאפיין מגדיר את מיקום האלמנט. כאן, הוסיף ' מוּחלָט ” ימקם את האלמנט ביחס לחלק הגוף של ה-HTML.
- ' חלק עליון 'מאפיין משמש להתאמה אנכית של האלמנט.
- ' שמאלה 'מאפיין משמש להתאמה אופקית של האלמנט.
שלב 4: סגנון 'תוכן' div
.תוֹכֶן {צבע רקע: כחול צוער;
רוחב: 300 פיקסלים;
גובה: 250 פיקסלים;
padding-left: 40px;
שוליים-שמאליים: 80px;
}
להלן מאפייני ה-CSS המוחלים על ' תוֹכֶן ” div:
-
- ' צבע רקע ' מאפיין מגדיר את צבע הרקע של האלמנט.
- ' רוֹחַב ' מאפיין מגדיר את רוחב האלמנט.
- ' גוֹבַה ' מאפיין מגדיר את גובה האלמנט.
- ' ריפוד-שמאל ' מאפיין מוגדר להוסיף שטח בצד שמאל של תוכן האלמנט.
- ' שוליים-שמאליים ' מאפיין מציין את הרווח בצד שמאל של האלמנט.
בשלב זה, דף האינטרנט שלנו ייראה כך:
ניתן לראות מהתוצאה לעיל שתמונת ה-div home ממוקמת ב-50px מלמעלה ו-45px משמאל לגוף המסמך. יתרה מכך, המיקום של ה-div הביתי נקבע ביחס לחלק הגוף של ה-HTML.
כיצד להתאים את מיקום האלמנט 'יחסית' לאלמנט האב הממוקם?
סעיף זה ידריך אותך בהתאמת מיקום האלמנט ביחס לאלמנט האב המיקום הקרוב ביותר.
הגדר 'מיקום' מאפיין של 'תוכן' div
עמדה: קרוב משפחה;
כדי להתאים את מיקום האלמנט ביחס לרכיב האב, הגדר את ' עמדה ' מאפיין של אלמנט האב ל' קרוב משפחה ' ערך.
הגדר מאפיין 'מיקום' של אלמנט 'img'.
.בית {מיקום: מוחלט;
למעלה: 100px;
שמאל: 220px;
}
פה:
-
- ' עמדה ' מאפיין עם הערך מוגדר כ' מוּחלָט ” ימוקם ביחס לאלמנט האב (כלומר, מיקום div content מוגדר עם הערך relative).
- ' חלק עליון 'מאפיין משמש להגדרת מיקום האלמנט מלמעלה.
- ' שמאלה 'מאפיין משמש להגדרת מיקום האלמנט משמאל.
תְפוּקָה
ניתן לראות מהתוצאה שהתמונה מוקמה ביחס ל-div האב שלה, והיא נראית מתאימה.
סיכום
ה-CSS ' עמדה מאפיין משמש להגדרת המיקום של רכיבי HTML. ניתן להעריך מאפיין זה כקבוע, יחסי, מוחלט, דביק וסטטי. ה ' מוּחלָט ' ערך ימקם את האלמנט המתאים לאלמנט האב הממוקם הסמוך שלו. פוסט זה הסביר את המיקום המוחלט של CSS עם דוגמה מעשית.