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