تعرف على الطبقة العلوية: حل لفهرس z:10000

تظهر الطبقة العليا فوق document ذات الصلة بها في مساحة العرض في المتصفّح، ولكل document طبقة علوية مرتبطة به. وهذا يعني أنّ العناصر التي تمت ترقيتها إلى الطبقة العليا لا داعي للقلق بشأن التسلسل الهرمي z-index أو DOM. ويحصلون أيضًا على عنصر زائف أنيق ::backdrop للعب به. تتناول مواصفات Fullscreen API تفاصيل أكثر لأنّ Fullscreen كان مثالاً رائعًا على الطبقة العليا المستخدَمة قبل إتاحة dialog.

تساعد الطبقة العلوية في حلّ مشكلة عرض المحتوى فوق بقية document.

النقاط المهمة التي يجب تذكرها: - الطبقة العلوية خارج مسار document. - لا يكون لـ z-index أي تأثير في الطبقة العليا. - يحتوي كل عنصر في الطبقة العليا على عنصر زائف ::backdrop قابل للتنسيق. - ينشئ كل عنصر و::backdrop سياق تكديس جديد. - يتم تكديس العناصر في الطبقة العلوية بالترتيب الذي تظهر به في المجموعة. آخر إدخال في، يظهر في الأعلى. إذا أردت ترقية عنصر، أزِله وأضِفه مرة أخرى.

كيف كنا نحاكي الطبقة العليا حتى الآن؟ من الشائع أن يضع المطوّرون عنصر حاوية فارغًا في نهاية body. وسيتم استخدام هذا كطبقة علوية "زائفة". والفكرة هي أن هذه الحاوية يتم وضعها فوق أي شيء آخر في المكدس. عندما تريد الترويج لشيء ما أهم من أي شيء آخر، يمكنك إلحاقه بتلك الحاوية. ويمكننا رؤية ذلك في الحزم الرائجة، مثل SweetAlert وreactjs-popup وMagnific Popup وغيرها.

باستخدام المكوّنات وواجهات برمجة التطبيقات المضمّنة الجديدة، مثل <dialog> و"Popover"، لن تحتاج إلى استخدام هذه الحلول البديلة. يمكنك الترويج للمحتوى إلى الطبقة العليا.

تتيح لنا أطر عمل واجهة المستخدم مشاركة العناصر التي تم الترويج لها مع نظيراتها من المكونات. ولكن غالبًا ما يتم فصلهما في DOM عند عرض الصفحة.

باستخدام الطبقة العليا، تكون العناصر التي يتم الترويج لها هي المكان الذي تضعها فيه في رمز المصدر (على سبيل المثال، <dialog>). ولا يهم عدد الطبقات التي يوجد بها العنصر في DOM. ستتم ترقيته إلى الطبقة العليا ويمكنك فحصه في المكان الذي تتوقع أن تكون فيه، وموضعه المشترك مع رمز HTML المكوّن. يسهّل ذلك فحص كلّ من العنصر المشغِّل والعنصر الذي تمت ترقيته في نموذج DOM في الوقت نفسه. يكون ذلك مفيدًا بشكل خاص إذا كان عنصر التفعيل يُجري تعديلات على السمات، على سبيل المثال. يكون لهذا أيضًا فائدة إضافية لإمكانية الوصول الآن بعد أن تم مشاركة الموقع في نفس الموقع.

لتوضيح الفرق بين الطبقة العليا وz-index العالي، يمكنك الاطّلاع على هذا العرض الترويجي.

في هذا العرض التوضيحي، يمكنك فتح نافذة SweetAlert المنبثقة وفتح طبقة عليا <dialog> أيضًا. افتح <dialog>، ثم حاوِل فتح النافذة المنبثقة SweetAlert. ستلاحظ أنّه يظهر أسفل عنصر الطبقة العليا. يستخدم جذر النافذة المنبثقة SweetAlert z-index‏10000 مع position: fixed.

.swal-overlay {
  z-index: 10000;
  position: fixed;
}

لست بحاجة إلى تطبيق أي أنماط على <dialog> لجعله يظهر فوق كل المحتوى الآخر.

أدوات مطوري البرامج

ينقلنا ذلك إلى دعم "أدوات مطوّري البرامج". تضيف "أدوات مطوّري البرامج في Chrome" إمكانية استخدام عناصر الطبقة العليا حتى تتمكّن من فحص الطبقة العليا. يسهِّل ذلك تصحيح الأخطاء وعرض كيفية تجميع العناصر في الطبقة العليا أو ما هو موجود في الطبقة العليا.

صورة GIF تعرض إتاحة استخدام الطبقة العليا من DevTools

نشرت "ألينا فاركي" مقالة رائعة تتناول بالتفصيل استخدام هذه الأدوات. وهي متاحة حاليًا كميزة معاينة في الإصدار 105 من Chrome Canary.

هذا كل شيء.

مقدّمة موجزة عن الطبقة العليا السماح بقول "وداعًا" لأشياء مثل:

.popup-container {
  z-index: 10000;
}

ما الذي ستدفعه إلى الطبقة العليا؟ هل جرّبت dialog؟ هل اطّلعت على OpenUI Popover API؟ يُرجى إعلامنا.