האם אי פעם הגדרת z-index: 99999 על אלמנט ב-CSS שלך, והוא לא יוצא על גבי אלמנטים אחרים? ערך גדול אמור בקלות למקם את הרכיב הזה בצורה ויזואלית על כל דבר אחר, בהנחה שכל האלמנטים השונים מוגדרים בערך נמוך יותר או לא מוגדרים בכלל. דף אינטרנט מיוצג בדרך כלל במרחב דו מימדי; עם זאת, על ידי יישום מאפייני CSS ספציפיים, מישור ציר Z דמיוני מוצג כדי להעביר עומק. מישור זה מאונך למסך, וממנו, המשתמש קולט את סדר האלמנטים, זה על גבי זה. הרעיון מאחורי ציר ה-Z הדמיוני, התפיסה של המשתמש לגבי אלמנטים מוערמים, הוא שמאפייני ה-CSS שיוצרים אותו מתאחדים ויוצרים את מה שאנו מכנים הקשר הערמה. אנחנו הולכים לדבר על האופן שבו אלמנטים "נערמים" בדף אינטרנט, מה שולט בסדר הערימה וגישות מעשיות ל"ביטול הערימה" של אלמנטים בעת הצורך. על קשרי הערמה דמיינו את דף האינטרנט שלכם כשולחן עבודה. כשאתה מוסיף רכיבי HTML, אתה מניח פיסות נייר, אחת אחרי השנייה, על השולחן. פיסת הנייר האחרונה שהונחה שווה ערך לרכיב ה-HTML שנוסף לאחרונה, והיא יושבת על כל שאר הניירות שהונחו לפניו. זוהי זרימת המסמכים הרגילה, אפילו עבור אלמנטים מקוננים. השולחן עצמו מייצג את הקשר הערימה של השורש, שנוצר על ידי אלמנט , המכיל את כל שאר התיקיות. כעת, מאפייני CSS ספציפיים נכנסים לפעולה. מאפיינים כמו מיקום (עם z-index), אטימות, טרנספורמציה והכיל) פועלים כמו תיקיה. תיקייה זו לוקחת אלמנט ואת כל הילדים שלו, מחלצת אותם מהמחסנית הראשית ומקבצת אותם למחסנית משנה נפרדת, ויוצרת מה שאנו מכנים קונטקסט ערימה. עבור אלמנטים ממוקמים, זה קורה כאשר אנו מכריזים על ערך z-index שאינו אוטומטי. עבור מאפיינים כמו אטימות, טרנספורמציה ומסנן, הקשר הערימה נוצר באופן אוטומטי כאשר ערכים ספציפיים מוחלים.
נסה להבין את זה: ברגע שפיסת נייר (כלומר, אלמנט צאצא) נמצאת בתוך תיקייה (כלומר, הקשר הערימה של ההורה), היא לעולם לא תוכל לצאת מהתיקייה הזו או להיות ממוקמת בין ניירות בתיקייה אחרת. ה-z-index שלו רלוונטי כעת רק בתוך התיקייה שלו.
באיור למטה, נייר B נמצא כעת בהקשר הערימה של תיקייה B, וניתן להזמין אותו רק עם ניירות אחרים בתיקייה.
תאר לעצמך, אם תרצה, שיש לך שתי תיקיות על השולחן שלך:
.folder-a { z-index: 1; } .folder-b { z-index: 2; }
בואו נעדכן קצת את הסימון. בתוך תיקייה A הוא עמוד מיוחד, Z-index: 9999. בתוך תיקיה B הוא עמוד רגיל, Z-index: 5.
.special-page { z-index: 9999; } .plain-page { z-index: 5; }
איזה עמוד בראש? זה ה-.plain-page בתיקייה B. הדפדפן מתעלם מהניירות של הילד ועורם תחילה את שתי התיקיות. הוא רואה את תיקייה B (אינדקס z: 2) ומניח אותה על התיקייה A (אינדקס z: 1) מכיוון שאנו יודעים ששניים גדול מאחד. בינתיים, הדף .special-page שהוגדר ל-z-index: 9999 נמצא בתחתית הערימה למרות שה-z-index שלו מוגדר לערך הגבוה ביותר האפשרי. ניתן גם לקנן הקשרי הערמה (תיקיות בתוך תיקיות), וליצור "עץ משפחה". אותו עיקרון חל: ילד לעולם לא יוכל להימלט מהתיקייה של הוריו. עכשיו כשאתה מבין איך מתנהגים הקשרי ערימה כמו תיקיות שמקבצות ומסדרות מחדש שכבות, כדאי לשאול: מדוע מאפיינים מסוימים - כמו טרנספורמציה ואטימות - יוצרים הקשרי ערימה חדשים? הנה העניין: המאפיינים האלה לא יוצרים הקשרי הערמה בגלל איך שהם נראים; הם עושים את זה בגלל איך הדפדפן עובד מתחת למכסה המנוע. כאשר אתה מחיל טרנספורמציה, אטימות, סינון או פרספקטיבה, אתה אומר לדפדפן, "היי, הרכיב הזה עשוי לזוז, להסתובב או לדעוך, אז היה מוכן!"
כאשר אתה משתמש במאפיינים אלה, הדפדפן יוצר הקשר ערימה חדש כדי לנהל את העיבוד בצורה יעילה יותר. זה מאפשר לדפדפן לטפל באנימציות, טרנספורמציות ואפקטים חזותיים באופן עצמאי, מה שמפחית את הצורך לחשב מחדש את האופן שבו אלמנטים אלה מקיימים אינטראקציה עם שאר הדף. תחשוב על זה כמו שהדפדפן אומר, "אני אטפל בתיקייה הזו בנפרד כדי שלא אצטרך לערבב מחדש את כל השולחן בכל פעם שמשהו בתוכו משתנה." אבל ישתופעת לוואי. ברגע שהדפדפן מרים אלמנט לשכבה משלו, עליו "לשטח" את כל מה שבתוכו, וליצור הקשר ערימה חדש. זה כמו להוריד תיקיה מהשולחן כדי לטפל בה בנפרד; כל מה שבתיקיה זו מתקבץ, והדפדפן מתייחס אליו כעת כיחידה אחת כאשר הוא מחליט מה יושב על מה. אז למרות שמאפייני הטרנספורמציה והאטימות לא משפיעים על האופן שבו אלמנטים נערמים ויזואלית, הם כן משפיעים על ביצועים. מספר מאפייני CSS אחרים יכולים גם ליצור הקשרי ערימה מסיבות דומות. MDN מספק רשימה מלאה אם אתה רוצה לחפור לעומק. יש לא מעט, מה שרק ממחיש כמה קל ליצור בלי משים קונטקסט הערמה מבלי לדעת זאת. בעיית "ביטול הערימה". בעיות הערמה יכולות להתעורר מסיבות רבות, אך חלקן נפוצות יותר מאחרות. רכיבים מודאליים הם דפוס קלאסי מכיוון שהם דורשים להחליף את הרכיב ל"פתיחה" בשכבה העליונה מעל כל שאר האלמנטים, ואז להסיר אותו מהשכבה העליונה כשהיא "סגורה". אני די בטוח שכולנו נתקלנו במצב שבו אנחנו פותחים מודאל, ומכל סיבה שהיא, הוא לא מופיע. זה לא שהוא לא נפתח כמו שצריך, אלא שהוא לא נראה בשכבה נמוכה יותר של הקשר הערימה. זה משאיר אותך לתהות "איך זה?" מאז שהגדרת:
.overlay { מיקום: קבוע; /* יוצר את הקשר הערימה */ z-index: 1; /* שם את האלמנט על שכבה מעל כל השאר */ הוספה: 0; רוחב: 100%; גובה: 100Vh; overflow: מוסתר; צבע רקע: #00000080; }
זה נראה תקין, אבל אם אלמנט האב המכיל את הטריגר המודאלי הוא אלמנט צאצא בתוך אלמנט אב אחר שמוגדר גם הוא ל-z-index: 1, שמציב מבחינה טכנית את המודאל בשכבת משנה המוסתרת על ידי התיקיה הראשית. הבה נסתכל על התרחיש הספציפי הזה ועוד כמה מלכודות נפוצות של ההקשר של הערמה. אני חושב שתראה לא רק כמה קל ליצור בלי משים הקשרי ערימה, אלא גם איך לנהל אותם בצורה לא נכונה. כמו כן, האופן שבו אתה חוזר למצב מנוהל תלוי במצב. תרחיש 1: דגם הלכודים
אתה יכול מיד לראות את המודאל שלך לכוד בשכבה ברמה נמוכה ולזהות את ההורה. הרחבות לדפדפן מפתחים חכמים בנו הרחבות כדי לעזור. כלים כמו זה "CSS Stacking Context Inspector" תוסף Chrome מוסיפים לשונית z-index נוספת ל-DevTools שלך כדי להראות לך מידע על אלמנטים שיוצרים הקשר ערימה.
הרחבות IDE אתה יכול אפילו לזהות בעיות במהלך הפיתוח עם הרחבה כמו זו עבור VS Code, שמדגישה בעיות פוטנציאליות של הקשר הערימה ישירות בעורך שלך.
ביטול הערימה והחזרת השליטה לאחר שזיהינו את סיבת השורש, השלב הבא הוא לטפל בה. ישנן מספר גישות שאתה יכול לנקוט כדי להתמודד עם בעיה זו, ואני אפרט אותן לפי הסדר. עם זאת, אתה יכול לבחור כל אחד בכל רמה; אף אחד לא יכול להתלונן או להפריע לאחר. שנה את מבנה ה-HTML זה נחשב לתיקון האופטימלי. כדי שתיתקל בבעיית ההקשר של הערמה, אתה חייב להציב כמה אלמנטים במיקומים מצחיקים בתוך ה-HTML שלך. מבנה מחדש של הדף יעזור לך לעצב מחדש את ה-DOM ולבטל את בעיית ההקשר של הערמה. מצא את האלמנט הבעייתי והסר אותו מאלמנט ההשמנה בסימון HTML. לדוגמה, אנו יכולים לפתור את התרחיש הראשון, "המודאל הכלוא", על ידי הזזת מיכל ה-.modal אל מחוץ לכותרת והצבתו באלמנט
בעצמו.לתוכן הזה יש אינדקס z של 2 ועדיין לא יכסה את המודל.כותרת
תוכן עיקרי
כאשר אתה לוחץ על כפתור "פתח מודל", המודאל ממוקם מול כל השאר כפי שהוא אמור להיות. ראה את תרחיש העט 1: המודל הלכוד (פתרון) [מזלג] מאת Shoyombo Gabriel Ayomide. התאם אתההקשר של ערימת הורים ב-CSS מה אם האלמנט הוא כזה שאתה לא יכול להזיז מבלי לשבור את הפריסה? עדיף להתייחס לנושא: ההורה קובע את ההקשר. מצא את מאפיין ה-CSS (או המאפיינים) האחראים להפעלת ההקשר והסר אותו. אם יש לו מטרה ולא ניתן להסירו, תן להורה ערך z-index גבוה יותר מהאלמנטים האחים שלו כדי להרים את המיכל כולו. עם ערך z-index גבוה יותר, מיכל האב עובר לראש, והילדים שלו נראים קרובים יותר למשתמש. בהתבסס על מה שלמדנו בתרחיש "הנפתחות השקועות", איננו יכולים להזיז את התפריט הנפתח אל מחוץ לסרגל הניווט; זה לא יהיה הגיוני. עם זאת, אנו יכולים להגדיל את ערך z-index של מיכל ה-.navbar כך שיהיה גדול יותר מערך z-index של רכיב ה-.content. .navbar { רקע: #333; /* z-index: 1; */ z-index: 3; עמדה: קרוב משפחה; }
עם השינוי הזה, התפריט הנפתח כעת מופיע מול התוכן ללא כל בעיה. ראה את תרחיש העט 2: The Submerged Dropdown (Solution) [מזלג] מאת Shoyombo Gabriel Ayomide. נסה פורטלים, אם אתה משתמש במסגרת במסגרות כמו React או Vue, פורטל הוא תכונה המאפשרת לך להציג רכיב מחוץ להיררכיית האב הרגילה שלו ב-DOM. פורטלים הם כמו מכשיר טלפורטציה עבור הרכיבים שלך. הם מאפשרים לך להציג HTML של רכיב בכל מקום במסמך (בדרך כלל ישירות לתוך document.body) תוך שמירה על קשר הגיוני להורה המקורי שלו עבור אביזרים, מצב ואירועים. זה מושלם לבריחה ממלכודות ההקשר של הערימה מכיוון שהפלט המעובד מופיע ממש מחוץ למיכל האב הבעייתי. ReactDOM.createPortal( <טיפ />, document.body );
זה מבטיח שהתוכן הנפתח שלך לא מוסתר מאחורי ההורה שלו, גם אם ההורה גדל: מוסתר או אינדקס z נמוך יותר. בתרחיש "The Clipped Tooltip" שבדקנו קודם לכן, השתמשתי בפורטל כדי לחלץ את קצה הכלים מהגלישה: קליפ מוסתר על ידי הנחתו בגוף המסמך והצבתו מעל הדק בתוך המיכל. ראה את תרחיש העט 3: קצה הכלים הקצוץ (פתרון) [מזלג] מאת Shoyombo Gabriel Ayomide. הכירו את הקשר הערמה ללא תופעות לוואי כל הגישות שהוסברו בסעיף הקודם מכוונות "לפתור" אלמנטים מהקשרי הערמה בעייתיים, אך ישנם מצבים שבהם תצטרכו או תרצו ליצור הקשר ערימה. יצירת הקשר ערימה חדש היא קלה, אבל כל הגישות מגיעות עם תופעת לוואי. כלומר חוץ משימוש בבידוד: לבודד. כאשר מיושמים על אלמנט, הקשר הערימה של ילדיו של אותו אלמנט נקבע ביחס לכל ילד ובתוך הקשר זה, במקום להיות מושפע מאלמנטים מחוצה לו. דוגמה קלאסית היא הקצאת לרכיב זה ערך שלילי, כגון z-index: -1. תאר לעצמך שיש לך רכיב .card. ברצונך להוסיף צורה דקורטיבית שיושבת מאחורי הטקסט של ה-.card, אך על גבי הרקע של הכרטיס. ללא הקשר הערמה על הכרטיס, z-index: -1 שולח את הצורה לתחתית הקשר הערימה השורשית (כל העמוד). זה גורם לזה להיעלם מאחורי הרקע הלבן של ה-.card: ראה את ה-Pen Negative z-index (בעיה) [מזלג] מאת Shoyombo Gabriel Ayomide. כדי לפתור זאת, אנו מכריזים על isolation: isolate בכרטיס האב. ראה את ה-Pen Negative z-index (פתרון) [מזלג] מאת Shoyombo Gabriel Ayomide. כעת, רכיב ה-.card עצמו הופך להקשר ערימה. כאשר לאלמנט הצאצא שלו - הצורה הדקורטיבית שנוצרה על :before-pseudo-element - יש Z-index: -1, הוא הולך לתחתית ההקשר הערימה של ההורה. הוא יושב בצורה מושלמת מאחורי הטקסט ועל גבי הרקע של הכרטיס, כמתוכנן. מסקנה זכור: בפעם הבאה שה-z-index שלך נראה יוצא מכלל שליטה, זה הקשר ערימה לכוד. הפניות
הקשר הערימה (MDN) Z-index והקשרי ערימה (web.dev) "כיצד ליצור הקשר ערימה חדש עם מאפיין הבידוד ב-CSS", נטלי פינה "מה לעזאזל, Z-index?", ג'וש קומאו
קריאה נוספת על SmashingMag
"ניהול CSS Z-Index בפרויקטים גדולים", סטיבן פריסון "כותרות דביקות ואלמנטים בגובה מלא: שילוב מסובך", פיליפ בראונן "ניהול Z-Index ביישום אינטרנט מבוסס רכיבים", Pavel Pomerantsev "נכס Z-Index CSS: מבט מקיף", לואיס לזריס
