Lapisan atas berada di atas document terkait di area pandang browser, dan setiap document memiliki satu lapisan atas terkait. Artinya, elemen yang dipromosikan ke lapisan atas tidak perlu khawatir dengan hierarki z-index atau DOM. Mereka juga mendapatkan elemen pseudo ::backdrop yang rapi untuk dimainkan. Spesifikasi Fullscreen API membahas detail selengkapnya karena Fullscreen adalah contoh bagus dari lapisan atas yang digunakan sebelum dukungan dialog muncul.
Lapisan atas membantu memecahkan masalah rendering konten di atas document lainnya.
Hal penting yang perlu diingat:
- Lapisan atas berada di luar alur document.
- z-index tidak berpengaruh di lapisan atas.
- Setiap elemen di lapisan atas memiliki elemen pseudo ::backdrop yang dapat ditata gayanya.
- Setiap elemen dan ::backdrop menghasilkan konteks penumpukan baru.
- Elemen di lapisan atas ditumpuk sesuai urutan kemunculan dalam set. Yang terakhir masuk, akan muncul di bagian atas. Jika Anda ingin mempromosikan elemen, hapus, lalu tambahkan kembali.
Bagaimana kita meniru lapisan atas hingga saat ini? Tidak jarang developer menempatkan elemen penampung kosong di akhir body. Kemudian, ini akan digunakan sebagai lapisan atas "palsu". Idenya adalah penampung ini diposisikan di atas semua yang ada di stack. Jika ingin mempromosikan sesuatu di atas yang lain, Anda dapat menambahkannya ke penampung tersebut. Kita dapat melihatnya di paket populer seperti SweetAlert, reactjs-popup, Magnific Popup, dan lainnya.
Dengan komponen bawaan dan API baru seperti <dialog> dan "Popover", Anda tidak perlu menggunakan solusi ini. Anda dapat mempromosikan konten ke lapisan atas.
Framework UI memungkinkan kita menempatkan elemen yang dipromosikan bersama dengan komponennya. Namun, keduanya sering kali dipisahkan di DOM dalam hal rendering.
Dengan menggunakan lapisan atas, elemen yang dipromosikan adalah tempat Anda menempatkannya dalam kode sumber (misalnya, <dialog>). Tidak masalah berapa banyak lapisan di DOM yang berisi elemen tersebut. Elemen akan dipromosikan ke lapisan atas dan Anda dapat memeriksanya di tempat yang Anda harapkan, yang berlokasi bersama dengan HTML komponen Anda. Hal ini mempermudah pemeriksaan elemen pemicu dan elemen yang dipromosikan di DOM secara bersamaan. Sangat berguna jika elemen pemicu Anda membuat pembaruan atribut, misalnya. Hal ini juga memiliki manfaat tambahan untuk aksesibilitas sekarang setelah elemen ditempatkan bersama.
Untuk mengilustrasikan lapisan atas versus z-index tinggi, pertimbangkan demo ini.
Dalam demo ini, Anda dapat membuka pop-up SweetAlert dan juga membuka <dialog> lapisan atas. Buka <dialog>, lalu coba buka pop-up SweetAlert. Anda akan melihat bahwa elemen tersebut muncul di bawah elemen lapisan atas. Dan root pop-up SweetAlert kami menggunakan z-index 10.000 dengan position: fixed.
.swal-overlay {
z-index: 10000;
position: fixed;
}
Anda tidak perlu menerapkan gaya apa pun ke <dialog> agar muncul di atas semua konten lainnya.
DevTools
Dan hal ini membawa kita ke dukungan DevTools. Chrome DevTools menambahkan dukungan untuk elemen lapisan atas sehingga Anda dapat memeriksa lapisan atas. Hal ini memudahkan Anda men-debug dan memvisualisasikan bagaimana hal-hal ditumpuk di lapisan atas atau bahkan apa yang ada di lapisan atas.
Alina Varkki memiliki artikel bagus yang membahas penggunaan alat ini secara mendalam. Fitur ini saat ini tersedia sebagai fitur pratinjau di Chrome Canary versi 105.
Selesai!
Pengantar singkat tentang lapisan atas. Memungkinkan Anda mengucapkan "Sampai jumpa" untuk hal-hal seperti:
.popup-container {
z-index: 10000;
}
Apa yang akan Anda masukkan ke Lapisan Atas? Sudahkah Anda mencoba dialog? Atau melihat OpenUI Popover API? Beri tahu kami.