टॉप लेयर, ब्राउज़र व्यूपोर्ट में अपने संबंधित document के ऊपर होती है. साथ ही, हर document के लिए एक टॉप लेयर होती है. इसका मतलब है कि टॉप लेयर में प्रमोट किए गए एलिमेंट को z-index या DOM हैरारकी की चिंता करने की ज़रूरत नहीं है. साथ ही, उन्हें एक शानदार ::backdrop स्यूडो-एलिमेंट भी मिलता है. Fullscreen API की खास जानकारी, ज़्यादा जानकारी के लिए मिलती है, क्योंकि dialog सहायता के आने से पहले, पूरी स्क्रीन का इस्तेमाल, सबसे ऊपर की लेयर के तौर पर किया जाता था.
टॉप लेयर से, document के बाकी हिस्सों के ऊपर कॉन्टेंट को रेंडर करने से जुड़ी समस्या को हल करने में मदद मिलती है.
ध्यान रखने वाली ज़रूरी बातें:
- टॉप लेयर, document फ़्लो से बाहर है.
- टॉप लेयर में z-index का कोई असर नहीं होता.
- सबसे ऊपर की लेयर के हर एलिमेंट में स्टाइल वाला ::backdrop स्यूडो-एलिमेंट होता है.
- हर एलिमेंट और ::backdrop, एक नया स्टैकिंग कॉन्टेक्स्ट जनरेट करता है.
- सबसे ऊपर वाली लेयर में मौजूद एलिमेंट, सेट में दिखने के क्रम में स्टैक किए जाते हैं. आखिरी मैसेज सबसे ऊपर दिखता है. अगर आपको किसी एलिमेंट का प्रमोशन करना है, तो उसे हटाएं और फिर से जोड़ें.
हमने अब तक टॉप लेयर की नकल कैसे की है? आम तौर पर, डेवलपर body के आखिर में खाली कंटेनर एलिमेंट डालते हैं. इसके बाद, इसका इस्तेमाल "नकली" टॉप लेयर के तौर पर किया जाएगा. इसका मतलब है कि यह कंटेनर, स्टैक में मौजूद बाकी सभी चीज़ों के ऊपर दिखेगा. जब आप किसी चीज़ का प्रचार करना चाहते हैं, तो आपको उसे उस कंटेनर में जोड़ देना चाहिए. हम इसे SweetAlert, reactjs-popup, Magnific Popup जैसे लोकप्रिय पैकेज में देख सकते हैं.
<dialog> और "पॉपओवर" जैसे नए बिल्ट-इन कॉम्पोनेंट और एपीआई की मदद से, आपको इन समस्याओं को हल करने के लिए इन तरीकों का इस्तेमाल करने की ज़रूरत नहीं होगी. कॉन्टेंट को टॉप लेयर पर प्रमोट किया जा सकता है.
यूज़र इंटरफ़ेस (यूआई) फ़्रेमवर्क की मदद से, हम प्रमोट किए गए एलिमेंट को उनके कॉम्पोनेंट वाले हिस्से के साथ मिलकर खोज सकते हैं. हालांकि, रेंडर करने के दौरान, ये अक्सर DOM में अलग-अलग हो जाते हैं.
टॉप लेयर का इस्तेमाल करके, प्रमोट किए गए एलिमेंट को अपने सोर्स कोड में डाला जाता है. उदाहरण के लिए, <dialog>. इससे कोई फ़र्क़ नहीं पड़ता कि एलिमेंट, DOM में कितनी लेयर नीचे है. इसे टॉप लेयर में प्रमोट कर दिया जाएगा. साथ ही, आपके पास यह जांचने का विकल्प होगा कि यह एलिमेंट, आपके कॉम्पोनेंट एचटीएमएल के साथ कहां मौजूद है. इससे डीओएम में ट्रिगर एलिमेंट और प्रमोट किए गए एलिमेंट, दोनों की एक साथ जांच करना आसान हो जाता है. यह खास तौर पर तब फ़ायदेमंद होता है, जब आपका ट्रिगर एलिमेंट, एट्रिब्यूट में बदलाव कर रहा हो. इसका एक फ़ायदा यह भी है कि सुलभता सुविधाएं अब एक ही जगह पर एक ही जगह पर मौजूद हैं.
टॉप लेयर बनाम हाई z-index को समझने के लिए, यह डेमो देखें.
इस डेमो में, SweetAlert पॉप-अप खोला जा सकता है. साथ ही, एक टॉप लेयर <dialog> भी खोली जा सकती है. <dialog> को खोलें और फिर SweetAlert पॉप-अप को खोलकर देखें. आपको यह दिखेगा कि यह हमारी टॉप लेयर के एलिमेंट के नीचे दिखता है. और हमारे SweetAlert पॉप-अप की मूल वजह, position: fixed के साथ 10,000 का z-index इस्तेमाल करना है.
.swal-overlay {
z-index: 10000;
position: fixed;
}
<dialog> को अन्य सभी कॉन्टेंट के ऊपर दिखाने के लिए, आपको उस पर कोई स्टाइल लागू करने की ज़रूरत नहीं है.
DevTools
अब हम DevTools के सहायता केंद्र पर आते हैं. Chrome DevTools सबसे ऊपर की लेयर के एलिमेंट के लिए सहायता जोड़ रहा है, ताकि आप टॉप लेयर की जांच कर सकें. इसकी मदद से, डीबग करना और यह विज़ुअलाइज़ करना आसान हो जाता है कि सबसे ऊपर की लेयर में चीज़ें किस तरह स्टैक हो रही हैं या सबसे ऊपर की लेयर में क्या है.
अलीना वर्की ने इन टूल के इस्तेमाल के बारे में शानदार लेख लिखा है. फ़िलहाल, ये सुविधाएं Chrome Canary के वर्शन 105 में झलक के तौर पर उपलब्ध हैं.
बस इतना ही!
सबसे ऊपरी लेयर के बारे में कम शब्दों में जानकारी. इन चीज़ों को "अलविदा!" कहा जा सकता है:
.popup-container {
z-index: 10000;
}
टॉप लेयर में क्या डाला जाएगा? क्या आपने dialog को आज़माया है? या OpenUI Popover API को खोला गया है? हमें बताएं!