מיקום אלמנטים חופפים עם גליונות סגנון מדורגים
אחד האתגרים בעת שימוש במיקוד CSS עבור פריסת דף אינטרנט הוא שחלק מהאלמנטים שלך עשויים לחפוף אחרים. זה עובד בסדר אם אתה רוצה את האלמנט האחרון ב- HTML להיות על העליונה, אבל מה אם אתה לא או מה אם אתה רוצה יש אלמנטים כי כרגע לא חופפים אחרים לעשות זאת, כי העיצוב קורא את זה "מרובד" נראה ? כדי לשנות את הדרך שבה אלמנטים חופפים אתה צריך להשתמש במאפיין של CSS.
אם השתמשת כלי גרפיקה ב- Word ו- PowerPoint או עורך תמונה חזק יותר כמו Adobe Photoshop, אז רוב הסיכויים שאתה כבר ראיתי משהו כמו Z- מדד בפעולה. בתוכניות אלה, באפשרותך להדגיש את האובייקטים שציירת, ולבחור באפשרות "שלח לגבהה" או "הפנה קדימה" אלמנטים מסוימים במסמך. ב Photoshop, אין לך את הפונקציות האלה, אבל יש לך את "שכבת" חלונית של התוכנית ואתה יכול לסדר שבו אלמנט נופל בד על ידי סידור מחדש של שכבות אלה. בשתי הדוגמאות הללו, אתה בעצם הגדרת Z- אינדקס של אובייקטים אלה.
מהו מדד z?
כאשר אתה משתמש במיקום CSS כדי למקם רכיבים בדף, עליך לחשוב בשלושה ממדים. ישנם שני ממדים סטנדרטיים: שמאל / ימין למעלה / למטה. המדד משמאל לימין ידוע כמדד x, ואילו הדף מלמעלה למטה הוא מדד y. כך היית מעמיד אלמנטים אופקית או אנכית, תוך שימוש בשני המדדים האלה.
כאשר מגיע עיצוב אתרים, יש גם את סדר הערימה של הדף. כל רכיב בדף יכול להיות מרובד מעל או מתחת לכל רכיב אחר. המאפיין z-index קובע היכן בערימה כל אלמנט הוא. אם אינדקס x ו- y הם קווים אופקיים ואנכיים, אז Z- אינדקס הוא עומק של הדף, למעשה את הממד השלישי.
אני אוהב לחשוב על אלמנטים בדף אינטרנט כמו פיסות נייר, ואת דף האינטרנט עצמו כמו קולאז '. איפה אני מניח את הנייר נקבע על ידי מיקום, וכמה זה מכוסה על ידי גורמים אחרים הוא מדד ה- z.
מדד Z הוא מספר, או חיובי (למשל 100) או שלילי (למשל -100). ברירת המחדל היא Z-index 0. האלמנט עם מדד ה- z הגבוה ביותר נמצא למעלה, ואחריו הבא הגבוה ביותר וכך הלאה אל ה- z הנמוך ביותר. אם לשני אלמנטים יש אותו ערך z-index (או שהוא אינו מוגדר, כלומר, ערך ברירת המחדל של 0) הדפדפן ישכפל אותם לפי סדר הופעתם ב- HTML.
כיצד להשתמש ב- z-index
תן לכל רכיב שאתה רוצה בערימה שלך ערך z- אינדקס שונה. לדוגמה, אם יש לי חמישה אלמנטים שונים:
- רכיב 1 - Z-index of -25
- רכיב 2 - מדד Z של 82
- אלמנט 3 - Z-index לא מוגדר
- רכיב 4 - מדד z של 10
- רכיב 5 - מדד z של -3
הם יערימו לפי הסדר הבא:
- אלמנט 2
- אלמנט 4
- רכיב 3
- רכיב 5
- רכיב 1
אני ממליץ להשתמש בערכי אינדקס z שונים מאוד כדי לערום את האלמנטים שלך. בדרך זו, אם תוסיף עוד אלמנטים לדף מאוחר יותר, יש לך מקום שכבת אותם מבלי להתאים את ערכי ה- z של האינדקס של כל האלמנטים האחרים. לדוגמה:
- 100 עבור האלמנט העליון ביותר שלי
- 0 עבור האלמנט האמצעי שלי
- -100 עבור האלמנט התחתון שלי
ניתן גם לתת שני אלמנטים באותו ערך z מדד. אם אלמנטים אלה מוערמים, הם יציגו בסדר שבו הם נכתבים ב- HTML, עם הרכיב האחרון על הדף.
הערה אחת, כדי שהרכיב ישתמש ביעילות במאפיין z-index, הוא חייב להיות רכיב ברמת הבלוק או להשתמש בתצוגה של "בלוק" או "בלוק מוטבע" בקובץ ה- CSS.
מאמר מקורי מאת ג'ניפר קרינין. נערך בתאריך 12/09/16 על ידי Jeremy Girard.