מיקום יחסי - מה זה? תיאור מפורט

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

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

מה זה CSS?

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

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

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

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

מה עושה את נכס העמדה?

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

אילו ערכים יכול נכס העמדה?

הרכוש שלנו יכול לקבל ערכים שונים, יש רק חמש. הנה תיאור קצר של כל:

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

עבודה עם תפקיד בדפדפנים שונים

לא כל הדפדפנים תואמים במידה שווה. בעוד שרוב התוכניות חלופיות לגלישה באינטרנט ללא תקלות נתפסות ערך של עמדה היא אמת לאמיתה, "» מיוחד כרוני של Internet Explorer רואה את הנכס, בהתאם לגרסה שלה.

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

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

עבודה עם תפקיד ב- Javascript

למעשה, הסיפור של איך לעבוד עם מיקום הנכס ב- Javascript הוא, כללנו רק למען ההגינות. מכיוון נכס זה אין שום תווים מיוחדים בכותרת, אתה יכול להשתמש JS ללא כל שינוי, למשל, כדי לקבוע את מיקום div יחסית, צריך לכלול בשורה כזו: div.style.position = "יחסים".

כפי שאתה יכול לראות, זה די פשוט.

למה יתרונות יחסיים עמד תשומת לב מיוחדת?

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

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

מתי כדאי לך להשתמש מיצוב יחסי?

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

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

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

דוגמאות לשימוש בדירוג היחסי

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

בואו נתחיל עם "נגמר" קו. נניח שיש לך צורך אלמנט אשר "נסיעות" בגלל הקצה השמאלי של המסך ולאט לאט להזיז אותו לצד ימין. כדי ליישם כזה "מנגנון" צריך להגדיר position: relative; משמאל: -100px, שבו -100 - המספר המשוער של פיקסלים המהווים את רוחב הבלוק. סגנון זה יאפשר לך להסתיר את היחידה מחוץ למסך, למקם אותו "עמדת המוצא". עכשיו אתה יכול להשתמש בסקריפט זה יגדיל כל כמה אלפיות עזבו ערך הנכס ליחידה כל עוד זה לא הופך שווה לרוחב של חלון הדפדפן מינוס רוחב האלמנט. התוצאה היא יחידה שיוצאת בקצה השמאלי, התגלגל לרוחב המסך "חונה" בידו הימנית.

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

טעויות אופייניות בעת שימוש מיקום יחסי

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