בודק ה-Z-Index חושף את סדר הערימה המלא של כל אלמנט בדף האינטרנט. כל אלמנט עם ערך z-index מסומן ומתויג ישירות על הדף, ולוח מפת שכבות ממוין מציג את כל שכבות ה-z-index מלמטה למעלה. הכלי מזהה stacking contexts שנוצרים על ידי position, transform, opacity ומאפייני CSS נוספים — ולבסוף הופך את ניפוי הבאגים של z-index לויזואלי ואינטואיטיבי.
באגים של z-index הם מהבעיות המתסכלות ביותר ב-CSS. מודאל שאמור להופיע מעל הכל מוסתר מאחורי סרגל צד. תפריט נפתח נעלם מאחורי החלק הבא. כלי עזר אינו נראה כי אלמנט אב יוצר stacking context בלתי צפוי. הסיבה השורשית היא כמעט תמיד אי-הבנה של אופן פעולת ה-stacking contexts — ו-DevTools של הדפדפן מספקים עזרה כמעט אפסית בהדמייתם. בודק ה-Z-Index הופך את הבלתי נראה לנראה. כל אלמנט עם z-index מפורש מקבל שכבת-על צבעונית ותווית המציגה את ערכו. לוח מפת שכבות ממוין מפרט את כל ערכי ה-z-index מלמטה (הנמוך ביותר) למעלה (הגבוה ביותר), ומציג לאיזו מחלקת CSS או אלמנט שייך כל ערך. חשוב מכל, הכלי מזהה גבולות stacking context — אלמנטים שיוצרים stacking contexts חדשים באמצעות position + z-index, transform, opacity < 1, filter, will-change, או isolation. הבנת איזה עצמאי יוצר את ה-stacking context היא בדרך כלל המפתח לתיקון באגי z-index.
כל אלמנט עם ערך z-index מקבל שכבת-על צבעונית שקופה למחצה ותגית תווית המציגה את מספר ה-z-index שלו. ערכי z-index גבוהים יותר מקבלים צבעים חמים יותר (אדומים), ערכים נמוכים יותר מקבלים צבעים קרים יותר (כחולים). השכבתיות הויזואלית הופכת את סדר הערימה לאינטואיטיבי באופן מיידי.
לוח צד מפרט את כל ערכי ה-z-index שנמצאו בדף, ממוינים מהגבוה (עליון) לנמוך (תחתון). כל רשומה מציגה את ערך ה-z-index, ה-CSS selector או שם המחלקה, ומאפיין ה-position. לחץ על כל רשומה כדי לסמן את האלמנט המתאים בדף.
מזהה כל גבול stacking context בדף ואת מאפיין ה-CSS שיוצר אותו — position: relative/absolute עם z-index, transform, opacity < 1, filter, will-change, isolation: isolate, או contain: layout. אלה מפורטים בנפרד כדי שתוכל לעקוב מדוע ערך z-index אינו מתנהג כצפוי.
לחץ על כל שכבה בלוח כדי לסמן ולגלול לאלמנט המתאים בדף. לחלופין, לחץ על כל אלמנט מסומן בדף כדי לאתר אותו בלוח מפת השכבות. נווט בסדר הערימה בכל כיוון שנוח לך.
כל רשומת שכבה מציגה את ערך ה-CSS position של האלמנט (static, relative, absolute, fixed, sticky) מכיוון ש-z-index חל רק על אלמנטים ממוקמים. זהה מקרים שבהם z-index מוגדר אך position הוא static — באג נפוץ שבו ל-z-index אין כל השפעה.
עבור כל אלמנט נבחר, ראה את השרשרת המלאה של stacking contexts אבות עד לשורש. הבן בדיוק איזה stacking context של אב מגביל את טווח ה-z-index של האלמנט — התובנה המרכזית לרוב ניפויי הבאגים של z-index.
מודאל עם z-index: 9999 מוסתר מאחורי סרגל צד עם z-index: 10. כיצד? בודק ה-Z-Index מציג שלאב של המודאל יש position: relative ויוצר stacking context עם z-index: 1, בעוד לאב של סרגל הצד יש z-index: 2. המודאל אינו יכול לעולם להימלט מ-context האב שלו.
תפריט נפתח נעלם מאחורי החלק הבא כשהוא נפתח. הבודק חושף שלמיכל התפריט יש overflow: hidden (שגם הוא יוצר stacking context) או שלחלק הבא יש z-index גבוה יותר. הסימון הויזואלי של השכבות הופך את החפיפה לברורה.
עם הזמן, ערכי z-index מצטברים: 10, 100, 999, 9999, 99999. מפת השכבות מציגה את כל הערכים ממוינים, מה שמקל על זיהוי הטווח הנדרש בפועל ופישוטו לסולם נקי (1, 2, 3, 10, 100).
ווידג'טי צ'אט, באנרים של עוגיות ושכבות-על של אנליטיקה מזריקים אלמנטים עם ערכי z-index גבוהים. בודק ה-Z-Index מציג בדיוק אילו ערכים הם משתמשים בהם, ומסייע לך לקבוע את ערכי ה-z-index שלך בצורה מתאימה כדי למנוע התנגשויות.
סקור את כל ה-stacking contexts בדף כדי לבדוק אם יש מיותרים. transforms, filters ו-opacity שהוחלו לאפקטים ויזואליים עלולים ליצור stacking contexts באופן לא מכוון שגורמים לבעיות z-index במקומות אחרים. רשימת ה-contexts הופכת את כולם לנראים.
פתח את ה-floating dock של DevSuite Pro ולחץ על סמל בודק ה-Z-Index. הכלי סורק את הדף ומזהה כל אלמנט עם ערך z-index וכל גבול stacking context.
אלמנטים עם ערכי z-index מקבלים שכבות-על צבעוניות ישירות על הדף, עם תוויות המציגות את מספרי ה-z-index שלהם. ערכים גבוהים יותר מופיעים בצבעים חמים יותר, ערכים נמוכים יותר בצבעים קרים יותר.
פתח את לוח הצד כדי לראות את כל שכבות ה-z-index ממוינות מהגבוהה לנמוכה. כל רשומה מציגה את הערך, ה-selector ומאפיין ה-position. לחץ על כל רשומה כדי לסמן את האלמנט בדף.
חלק ה-"Stacking Contexts" בלוח מפרט כל אלמנט שיוצר stacking context חדש ואת מאפיין ה-CSS האחראי. זה בדרך כלל המפתח להבנת בעיות z-index.
לחץ על כל אלמנט כדי לראות את שרשרת stacking context האבות שלו — אילו context אבות משפיעים על סדר הרינדור שלו. עקוב אחר השרשרת כלפי מעלה כדי למצוא את גבול ה-context הגורם לבעיית הערימה.
התקן את DevSuite Pro בחינם ופתח 39+ כלי פיתוח לדפדפן שלך.
