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