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

Jhey Tompkins

تظهر الطبقة العليا فوق document ذات الصلة بها في مساحة العرض في المتصفّح، ولكل document طبقة علوية مرتبطة به. وهذا يعني أنّ العناصر التي تمت ترقيتها إلى الطبقة العليا لا داعي للقلق بشأن التسلسل الهرمي z-index أو DOM. ويحصلون أيضًا على عنصر زائف أنيق ::backdrop للعب به. تتناول مواصفات واجهة برمجة تطبيقات ملء الشاشة مزيدًا من التفاصيل، حيث كانت ميزة ملء الشاشة مثالاً رائعًا على الطبقة العلوية المستخدمة قبل ظهور دعم 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" إمكانية استخدام عناصر الطبقة العليا حتى تتمكّن من فحص الطبقة العليا. هذا يجعل من السهل تصحيح الأخطاء وتصور كيفية تكديس الأشياء في الطبقة العلوية أو ما هو حتى في الطبقة العلوية.

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

هذا كل شيء.

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

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

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