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

הפודקאסט של CSS – 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 ואת ההקשרים של סידור בערימה.

מדד Z

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

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

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

זה לא המצב כשמדובר ב-flexbox או ב-Networking, אבל כי אפשר לשנות את מדד 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 שלכם ומשתמש בהם כדי לחשב את הגודל של שטח העריכה. לאחר מכן הוא צובע את הדף על בד הציור הזה. אם רכיב כלשהו השתנה - למשל, הוא משנה את המיקום - אחר כך הדפדפן צריך לחזור אחורה ולחשוב מחדש מה לצבוע.

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

מקורות מידע

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

בדיקת ההבנה

בחינת הידע שלך לגבי z-index

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