השכבה העליונה נמצאת מעל document הקשורה אליה באזור התצוגה של הדפדפן, ולכל document משויכת שכבה עליונה אחת. כלומר, רכיבים שמקודמים לשכבה העליונה לא צריכים לדאוג להיררכיה של z-index או DOM. הם גם מקבלים פסאודו-אלמנט מגניב של ::backdrop שאפשר לשחק איתו. המפרט של Fullscreen API כולל פרטים נוספים, כי Fullscreen היה דוגמה מצוינת לשכבה העליונה שנמצאת בשימוש לפני שנוספה התמיכה ב-dialog.
השכבה העליונה עוזרת לפתור את הבעיה של רינדור התוכן מעל שאר החלקים של document.
דברים שחשוב לזכור:
- השכבה העליונה נמצאת מחוץ לתהליך של document.
- ל-z-index אין השפעה בשכבה העליונה.
- לכל רכיב בשכבה העליונה יש פסאודו-רכיב ::backdrop שניתן לעצב.
- כל רכיב ו-::backdrop יוצרים הקשר חדש של סידור בערימה.
- הרכיבים בשכבה העליונה מוערמים לפי הסדר שבו הם מופיעים בקבוצה. הסימון האחרון בכיתוב מופיע למעלה. כדי לקדם רכיב, צריך להסיר אותו ולהוסיף אותו מחדש.
איך חיקה את השכבה העליונה עד עכשיו? ובכן, לפעמים מפתחים משחררים רכיב ריק של קונטיינר בסוף body. ואז זה ישמש לשכבה העליונה. הרעיון הוא שהמאגר הזה ימוקם מעל כל שאר הפריטים במקבץ. כשרוצים לקדם משהו מעל כל דבר אחר, מוסיפים אותו למאגר התגים הזה. אפשר לראות את זה בחבילות פופולריות כמו SweetAlert, reactjs-popup, Magnific Popup ועוד.
עם רכיבים מובנים חדשים וממשקי API כמו <dialog> וPopover", לא תצטרכו להיעזר בפתרונות האלה. ניתן לקדם תוכן לשכבה העליונה.
frameworks של ממשק משתמש מאפשרות לנו לאתר באופן משותף את הרכיבים המקודמים עם הרכיבים המקבילים להם. אבל בדרך כלל הם מופרדים ב-DOM כשמדובר בעיבוד.
אם משתמשים בשכבה העליונה, רכיבים מקודמים הם המקום שבו מוסיפים אותם בקוד המקור (לדוגמה <dialog>). לא משנה כמה שכבות למטה ב-DOM הרכיב נמצא. הוא יקודם לשכבה העליונה ותוכלו לבדוק אותו במקום שבו אתם מצפים שהוא יופיע, ולמוקם אותו במשותף עם קוד ה-HTML של הרכיב. כך קל יותר לבדוק גם את רכיב הטריגר וגם את הרכיב המקודם ב-DOM בו-זמנית. שימושי במיוחד אם רכיב הטריגר מבצע עדכוני מאפיינים, למשל. לאפשרות הזו יש גם יתרון נוסף לנגישות, מאחר שהאלמנטים נמצאים במיקום משותף.
כדי להמחיש את השכבה העליונה לעומת הגבוהה של z-index, נבחן את ההדגמה הזו.
בהדגמה הזו אפשר לפתוח חלון קופץ של SweetAlert וגם לפתוח שכבה עליונה <dialog>. צריך לפתוח את <dialog> ולנסות לפתוח את החלון הקופץ של SweetAlert. היא מופיעה מתחת לרכיב השכבה העליונה. והשורש של החלון הקופץ SweetAlert משתמש ב-z-index של 10,000 עם position: fixed.
.swal-overlay {
z-index: 10000;
position: fixed;
}
אין צורך להחיל סגנונות על <dialog> כדי להופיע מעל כל תוכן אחר.
כלי פיתוח
ואז אנחנו מגיעים לתמיכה של כלי הפיתוח. בכלי הפיתוח ל-Chrome הוספנו תמיכה ברכיבים בשכבה העליונה, כדי שתוכלו לבדוק את השכבה העליונה. כך קל יותר לנפות באגים ולהציג נתונים באופן ויזואלי בשכבה העליונה או אפילו בשכבה העליונה.
לאלינה וארקי יש מאמר נהדר שמסביר בצורה מפורטת על השימוש בכלים האלה. נכון לעכשיו, היא זמינה כתכונת תצוגה מקדימה ב-Chrome Canary בגרסה 105.
זהו!
מבוא קצר לשכבה העליונה. מאפשרת לומר "ביי!" לדברים כמו:
.popup-container {
z-index: 10000;
}
מה היית רוצה להוסיף לשכבה העליונה? כבר ניסית את dialog? או לבדוק את OpenUI Popover API? שלח לנו הודעה!