הפודקאסט של 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-index
<section> <article>1</article> <article>2</article> <article>3</article> <article>4</article> </section>
איזה מאמר נמצא בראש הרשימה כברירת מחדל?
אם z-index לא פועל, איזה מאפיין צריך לבדוק ברכיב שלכם?
display
relative
position
static
.animation
האם צריך להשתמש ב-flexbox וברשת position: relative
?
position: relative
.