מוחלט לעומת יחסי - הסבר CSS מיקום

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

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

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

• סטטי
• מוחלטת
• קרוב משפחה
• תוקן

מיקום סטטי

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

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

מיקום מוחלט של CSS

מיקום מוחלט הוא כנראה המיקום הקל ביותר CSS להבין. אתה מתחיל עם מיקום מיקום CSS זה:

תפקיד מוחלט

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

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

תפקיד מוחלטtop: 50px;

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

ארבעת מאפייני המיקום שיש לך לשימוש הם:

• חלק עליון
• ימין
• בתחתית
• שמאלה

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

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

מיקום יחסי

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

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

פסקה 1.

סעיף 2.

סעיף 3.

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

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

מה לגבי מיקום קבוע?

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

כדי להשתמש בערך המאפיין הזה, אתה קובע:

תפקיד: קבוע;

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

@media מסך { h1 first {position: fixed; } } @media print { h1 # first {position: סטטי; } }