אחד האתגרים בעת שימוש במיקוד CSS עבור פריסת דף אינטרנט הוא שחלק מהאלמנטים שלך עשויים לחפוף אחרים. זה עובד בסדר אם אתה רוצה את האלמנט האחרון ב- HTML להיות על העליונה, אבל מה אם אתה לא או מה אם אתה רוצה יש אלמנטים כי כרגע לא חופפים אחרים לעשות זאת, כי העיצוב קורא את זה "מרובד" נראה ? כדי לשנות את הדרך שבה אלמנטים חופפים אתה צריך להשתמש במאפיין של CSS.
אם השתמשת בכלים גרפיים ב- Word ו- PowerPoint או עורך תמונה חזק יותר כמו Adobe Photoshop, אז רוב הסיכויים שראית משהו כמו Z- מדד בפעולה. בתוכניות אלה, באפשרותך להדגיש את האובייקטים שציירת, ולבחור באפשרות "שלח לגבהה" או "הפנה קדימה" אלמנטים מסוימים במסמך. ב Photoshop, אין לך את הפונקציות האלה, אבל יש לך את "שכבת" חלונית של התוכנית ואתה יכול לסדר שבו אלמנט נופל על הבד על ידי סידור מחדש של שכבות אלה. בשתי הדוגמאות הללו, אתה בעצם הגדרת Z- אינדקס של אובייקטים אלה.
מה זה Z-Index?
כאשר אתה משתמש במיקום CSS כדי למקם רכיבים בדף, עליך לחשוב בשלושה ממדים. ישנם שני ממדים סטנדרטיים: שמאל / ימין למעלה / למטה. המדד משמאל לימין ידוע כמדד x, ואילו הדף מלמעלה למטה הוא מדד y. כך היית מעמיד אלמנטים אופקית או אנכית, תוך שימוש בשני המדדים האלה.
כאשר מדובר עיצוב אתרים, יש גם את סדר הערימה של הדף. כל רכיב בדף יכול להיות מרובד מעל או מתחת לכל רכיב אחר. המאפיין z-index קובע היכן בערימה כל אלמנט הוא. אם אינדקס x ו- y הם קווים אופקיים ואנכיים, אז Z- אינדקס הוא עומק של הדף, למעשה את הממד השלישי.
תחשוב על אלמנטים בדף אינטרנט כמו פיסות נייר ואת דף האינטרנט עצמו כמו קולאז '. איפה אתה מניח את הנייר נקבע על ידי מיקום, וכמה זה מכוסה על ידי גורמים אחרים הוא מדד ה- z.
- מדד ה- z הוא מספר, חיובי (למשל 100) או שלילי (למשל -100).
- ברירת המחדל של Z-index היא 0.
האלמנט עם מדד ה- z הגבוה ביותר נמצא על העליונה, ואחריו הבא הגבוה ביותר וכך הלאה אל ה- z הנמוך ביותר. אם לשני אלמנטים יש אותו ערך z-index (או שהוא אינו מוגדר, כלומר, ערך ברירת המחדל של 0) הדפדפן ישכפל אותם לפי סדר הופעתם ב- HTML.
כיצד להשתמש Z- אינדקס
תן לכל רכיב שאתה רוצה בערימה שלך ערך z- אינדקס שונה. לדוגמה, אם יש לך חמישה אלמנטים שונים:
- רכיב A - z-index of -25
- אלמנט B - Z-index של 82
- אלמנט C - Z לא מוגדר
- רכיב D - מדד z של 10
- רכיב E - z-index של -3
הם יערימו לפי הסדר הבא:
- רכיב ב
- אלמנט D
- רכיב C
- רכיב E
- רכיב א
מומלץ להשתמש בערכים שונים של ערכי Z-index כדי לערום את האלמנטים שלך. בדרך זו, אם תוסיף עוד אלמנטים לדף מאוחר יותר, יש לך מקום שכבת אותם מבלי להתאים את ערכי ה- z של האינדקס של כל האלמנטים האחרים. לדוגמה:
- 100 עבור האלמנט העליון ביותר שלך
- 0 עבור האלמנט האמצעי שלך
- -100 עבור האלמנט התחתון שלך
ניתן גם לתת שני אלמנטים באותו ערך z מדד. אם אלמנטים אלה מוערמים, הם יציגו בסדר שבו הם נכתבים ב- HTML, עם הרכיב האחרון על הדף.
הערה אחת: כדי שהרכיב ישתמש ביעילות במאפיין z-index, עליו להיות רכיב ברמת הבלוק או להשתמש בתצוגה של "בלוק" או "בלוק מוטבע" בקובץ ה- CSS.
