CSS מיקום הוא יותר מאשר רק X, Y קואורדינטות
CSS מיקום כבר זמן רב חלק חשוב ביצירת פריסות אתר. אפילו עם עלייתה של טכניקות פריסת CSS חדשות יותר כמו Flexbox ו- CSS Grid, המיקום עדיין יש מקום חשוב בכל תיק של מעצב אינטרנט של טריקים.
בעת שימוש במיקוד CSS, הדבר הראשון שאתה צריך לעשות הוא להקים את המאפיין CSS למיקום כדי לספר לדפדפן אם אתה מתכוון להשתמש במיקום מוחלט או יחסי עבור אלמנט נתון. אתה גם צריך להבין בבירור את ההבדל בין שני אלה תכונות מיצוב.
בעוד מוחלטת וקרובה הם שני המאפיינים מיקום CSS המשמשים לעתים קרובות ביותר בעיצוב אתרים, יש למעשה ארבע מדינות על מיקום הנכס:
- סטָטִי
- מוּחלָט
- קרוב משפחה
- תוקן
סטטי הוא מיקום ברירת המחדל עבור כל רכיב בדף אינטרנט. אם לא תגדיר את המיקום של אלמנט, הוא יהיה סטטי. משמעות הדבר היא כי היא תוצג על המסך מבוסס על המקום שבו הוא נמצא במסמך HTML וכיצד היא תוצג בתוך הזרימה הרגילה של המסמך.
אם תחיל כללי מיקום כמו למעלה או שמאלה על אלמנט בעל מיקום סטטי, המערכת תתעלם מכללים אלו והאלמנט יישאר במקום שבו הוא מופיע בתזרים מסמכים רגיל. למען האמת, לעתים רחוקות, אם בכלל, צריך להגדיר אלמנט למיקום סטטי ב- CSS מכיוון שזהו ערך ברירת המחדל.
מיקום מוחלט של CSS
מיקום מוחלט הוא כנראה המיקום הקל ביותר CSS להבין. אתה מתחיל עם מיקום מיקום CSS זה:
תפקיד מוחלטערך זה אומר לדפדפן שכל מה שיוצב צריך להיות מוסר מהזרימה הרגילה של המסמך, ובמקום זאת ממוקם במיקום מדויק בדף. זה מחושב על בסיס זה של האלמנט הקרוב ביותר שאינו ממוקם סטטי.
בגלל אלמנט מוצב לחלוטין נלקח מתוך הזרימה הרגילה של המסמך, זה לא ישפיע על האופן שבו האלמנטים לפני זה או אחריו ב- HTML ממוקמים בדף האינטרנט.
כדוגמה - אם היה לך חלוקה כי היה ממוקם באמצעות ערך של יחסית (נבחן ערך זה בקרוב), ובתוך חלוקה זו היה לך פסקה כי אתה רוצה למקם 50 פיקסלים מהחלק העליון של החלוקה, אתה היה מוסיף ערך מיקום של "מוחלטת" לאותה פסקה יחד עם ערך היסט של 50px על המאפיין "העליון", כמו זה.
תפקיד מוחלט top: 50px;זה האלמנט ממוקם לחלוטין ואז תמיד להציג 50 פיקסלים מהחלק העליון של חטיבה הממוצבת יחסית - לא משנה מה עוד מציג שם בזרימה רגילה. את "לחלוטין" ממוקם אלמנט השתמשו במיקום אחד יחסית כמו ההקשר שלה ואת הערך positing אתה משתמש יחסית זה.
ארבעת מאפייני המיקום שיש לך לשימוש הם:
- חלק עליון
- ימין
- תַחתִית
- שמאלה
ניתן להשתמש בחלק העליון או התחתון (כיוון שלא ניתן למקם רכיב לפי שני ערכים אלה) או ימינה או שמאלה.
אם אלמנט מוגדר למצב מוחלט, אך אין בו אבות שאינם ממוקמים באופן סטאטילי, הוא ימוקם ביחס אלמנט הגוף, שהוא האלמנט ברמה הגבוהה ביותר של הדף.
מיקום יחסי
כבר הזכרנו מיקום יחסי, אז בואו נסתכל על הנכס הזה עכשיו.
מיקום יחסי משתמש באותם מאפייני מיקום של מיקום זהה, אך במקום לבסס את מיקומו של האלמנט על האב הקדמון הקרוב ביותר שאינו סטאטיקלי, הוא מתחיל מהמקום שבו יהיה האלמנט אם הוא עדיין נמצא בזרימה הרגילה.
לדוגמה, אם יש לך שלוש פסקאות בדף האינטרנט שלך, והשלישית יש סגנון "מיקום: יחסית" ממוקם על זה, זה המיקום יהיה לקזז על סמך המיקום הנוכחי של זה.
סעיף 1.
פסקה 2.
סעיף 3.
בדוגמה לעיל, את הפסקה השלישית יהיה ממוקם 2em מצד שמאל של אלמנט מכולה, אבל עדיין יהיה מתחת שתי פסקאות הראשונות. זה יישאר בזרימה הרגילה של המסמך, ופשוט לקזז מעט. אם שינית אותו למיקום: מוחלטת; כל דבר שעוקב אחריו יוצג על גבי זה, כי זה כבר לא יהיה בזרימה הרגילה של המסמך.
אלמנטים בדף אינטרנט משמשים לעתים קרובות כדי להגדיר ערך של מיקום: יחסית ללא ערך קיזוז הוקמה, כלומר אלמנט נשאר בדיוק איפה זה יופיע בזרימה רגילה. דבר זה נעשה אך ורק כדי לבסס את האלמנט הזה כקשרון אשר נגדו ניתן למקם גורמים אחרים לחלוטין. לדוגמה, אם יש לך חלוקה סביב האתר כולו שלך עם ערך בכיתה של "מכולה" (שהיא תרחיש נפוץ מאוד בעיצוב אתרים), ניתן להגדיר את החלוקה למצב של קרוב, כך שכל דבר בתוכו יכול להשתמש זה בהקשר ההקשר.
מה לגבי מיקום קבוע?
מיקום קבוע הוא הרבה כמו מיקום מוחלט. מיקומו של האלמנט מחושב באותו אופן כמו המודל המוחלט, אך אלמנטים קבועים קבועים באותו מקום - כמעט כמו סימן מים . כל שאר הדברים בדף ידפדפו אחר אלמנט זה.
כדי להשתמש בערך נכס זה, עליך להגדיר:
תפקיד: קבוע;זכור, כאשר אתה מתקן אלמנט כלשהו באתר שלך, הוא יודפס במיקום זה כאשר דף האינטרנט שלך יודפס. לדוגמה, אם הרכיב שלך קבוע בחלק העליון של הדף, הוא יופיע בחלק העליון של כל דף מודפס - מכיוון שהוא קבוע לראש הדף. באפשרותך להשתמש בסוגי מדיה כדי לשנות את אופן הצגת הדפים המודפסים באלמנטים קבועים:
@media screen {h1 # first {position: fixed; }} @media print {h1 # first {position: סטטי; }}מאמר מקורי מאת ג'ניפר קרינין. בעריכת ג'רמי ג'ירארד ב- 1/7/16.