Z-index והקשרים של סידור בערימה

The CSS Podcast - 019: z-index והקשרים של מקבצים

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

<div class="stacked-items">
    <div class="item-1">Item 1</div>
    <div class="item-2">Item 2</div>
</div>

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

אינדקס Z

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

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

בזרימה רגילה, אם הגדרתם ערך ספציפי ל-z-index והוא לא פועל, צריך להגדיר את הערך position של הרכיב לכל דבר אחר מלבד static. זה מקום נפוץ שבו אנשים נאבקים בz-index.

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

מדד z שלילי

כדי להגדיר רכיב מאחורי רכיב אחר, צריך להוסיף ערך שלילי עבור z-index.

.my-element {
    background: rgb(232 240 254 / 0.4);
}

.my-element .child {
    position: relative;
    z-index: -1;
}

כל עוד ל-.my-element יש ערך ראשוני עבור z-index שהוא auto, הרכיב .child ימוקם מאחוריו.

צריך להוסיף את שירות ה-CSS הבא אל .my-element, והרכיב .child לא יופיע מאחוריו.

.my-element {
  position: relative;
  z-index: 0;
  background: rgb(232 240 254 / 0.4);
}

כי ל-.my-element יש עכשיו ערך position שהוא לא static וערך z-index הוא לא auto, נוצר הקשר מקבץ חדש. המשמעות היא שגם אם הגדרתם ל-.child את z-index של -999, הוא עדיין לא ישב מאחורי .my-parent.

סידור ההקשר בערימה

הקשר בערימה הוא קבוצה של רכיבים שיש להם הורה משותף, שנעים למעלה ולמטה בציר ה-z יחד.

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

z-index של אלמנטים בתוך הקשר בערימה הן תמיד ביחס לסדר הנוכחי של ההורה בהקשר של ערימה.

יצירת הקשר לסידור בערימה

אין צורך להחיל את z-index ואת position כדי ליצור חשבון חדש יצירת הקשר בערימה. ניתן ליצור הקשר חדש של ערימה על ידי הוספת ערך למאפיינים שיוצרים שכבה מורכבת חדשה כמו opacity, will-change ו-transform. אפשר כאן אפשר לעיין ברשימה המלאה של הנכסים.

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

כדי לעזור לשפר את הביצועים, הדפדפן יוצר שכבות מורכבות חדשות שממוקמות מעל אזור העריכה. אלה כמה הערות 'post-it': אם תזיזו את התצוגה ותשנו אותה לא תהיה לכך השפעה משמעותית על אזור העריכה. שכבה מורכבת חדשה נוצרת עבור רכיבים עם opacity, transform וגם will-change, כי סביר מאוד להניח שהשינויים האלה ישתנו, כך שהדפדפן יוודא שהשינוי יניב ביצועים טובים ככל האפשר על ידי שימוש ב-GPU להחלת התאמות סגנונות.

משאבים

• אילוץ שכבות
• מדריך אנימציות: אילוץ יצירת שכבות
• הסבר על z-index

בדיקת ההבנה

בוחנים את הידע שלכם לגבי z-index

<section>
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
</section>