تقع الطبقة العلوية فوق document ذات الصلة بها في إطار عرض المتصفّح، ولكل document طبقة علوية مرتبطة بها. هذا يعني أنّ العناصر التي تمت ترقيتها إلى الطبقة العليا لا داعي للقلق بشأن التدرّج الهرمي z-index أو DOM. وستحصل أيضًا على عنصر زائف أنيق من "::backdrop" تلعب به. تتناول مواصفات واجهة برمجة تطبيقات ملء الشاشة مزيدًا من التفاصيل، حيث كانت ميزة ملء الشاشة مثالاً رائعًا على الطبقة العلوية المستخدمة قبل ظهور دعم dialog.
تساعد الطبقة العليا في حل مشكلة عرض المحتوى فوق بقية document.
أمور مهمة يجب تذكرها:
- الطبقة العلوية خارج تدفق document.
- ليس لـ "z-index" أي تأثير في الطبقة العلوية.
- يتضمّن كل عنصر في الطبقة العلوية عنصرًا زائفًا ::backdrop قابلاً للنمط.
- ينشئ كل عنصر و::backdrop سياق تكديس جديد.
- يتم تكديس العناصر في الطبقة العلوية بالترتيب الذي تظهر به في المجموعة. آخر إدخال في، يظهر في الأعلى. إذا أردت الترويج لعنصر، عليك إزالته وإضافته من جديد.
كيف أجرينا محاكاة للطبقة العليا حتى الآن؟ من الشائع أن نرى المطوِّرين يإسقاطون عنصر حاوية فارغًا في نهاية body. وبعد ذلك سيتم استخدام هذا على أنه "زائف" طبقة علوية ناعمة. تكمن الفكرة في أن هذه الحاوية يتم وضعها فوق أي شيء آخر في المكدس. عندما تريد الترويج لشيء ما أهم من أي شيء آخر، يمكنك إلحاقه بتلك الحاوية. ويمكننا أن نلاحظ ذلك في الحزم الرائجة، مثل SweetAlert وreactjs-popup وMagnific Popup وغيرها.
باستخدام المكونات وواجهات برمجة التطبيقات المدمجة الجديدة، مثل <dialog> و"النافذة المنبثقة"، لن تحتاج إلى استخدام هذه الحلول البديلة. يمكنك ترقية المحتوى إلى الطبقة العليا.
تتيح لنا أطر عمل واجهة المستخدم مشاركة العناصر التي تم الترويج لها مع نظيراتها من المكونات. ومع ذلك، غالبًا ما يتم فصلها في 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" على إضافة عناصر الطبقة العلوية كي تتمكّن من فحص الطبقة العلوية. هذا يجعل من السهل تصحيح الأخطاء وتصور كيفية تكديس الأشياء في الطبقة العلوية أو ما هو حتى في الطبقة العلوية.
لدى "ألينا فاركي" مقالة رائعة تتناول استخدام هذه الأدوات بالتفصيل. وهي متاحة حاليًا كميزة معاينة في الإصدار 105 من Chrome Canary.
هذا كل شيء.
مقدمة موجزة عن الطبقة العلوية. بِيْتِمّْ دِلْوَقْتِي مَنْحِي الطَّرِيقْ لِقول "وداعًا!" إلى أشياء مثل:
.popup-container {
z-index: 10000;
}
ما الذي قد تدفعه إلى الطبقة العليا؟ هل جرّبت dialog؟ أو راجع OpenUI Popover API؟ يُرجى إعلامنا.