Lapisan atas berada di atas document yang terkait di area pandang browser, dan setiap document memiliki satu lapisan teratas yang terkait. Artinya, elemen yang dipromosikan ke lapisan teratas tidak perlu mengkhawatirkan z-index atau hierarki DOM. Mereka juga mendapatkan elemen semu ::backdrop yang rapi untuk dimainkan. Spesifikasi Fullscreen API menjelaskan lebih lanjut karena Fullscreen adalah contoh yang bagus dari lapisan atas yang digunakan sebelum dukungan dialog hadir.
Lapisan atas membantu mengatasi masalah rendering konten di atas document lainnya.
Hal-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 semu ::backdrop yang dapat ditata gayanya.
- Setiap elemen dan ::backdrop menghasilkan konteks tumpukan baru.
- Elemen di lapisan atas ditumpuk sesuai urutan kemunculannya dalam kumpulan. Yang terakhir masuk, muncul di atas. Jika Anda ingin mempromosikan suatu elemen, hapus, dan tambahkan lagi.
Bagaimana kita bisa menirukan lapisan atas sampai sekarang? Tidak jarang ada developer yang menambahkan elemen container kosong di akhir body. Dan hal ini akan digunakan sebagai "{i>faux<i}" lapisan teratas. Idenya adalah penampung ini ditempatkan di atas semua yang lain dalam tumpukan. Jika Anda ingin mempromosikan sesuatu di atas segalanya, Anda harus menambahkannya ke penampung tersebut. Kita dapat melihatnya di paket populer seperti SweetAlert, reactjs-popup, Magnific Pop-up, dan lainnya.
Dengan API dan komponen bawaan yang baru seperti <dialog> dan "Popover", Anda tidak perlu menggunakan solusi ini. Anda dapat mempromosikan konten ke lapisan atas.
Framework UI memungkinkan kita menempatkan bersama elemen yang dipromosikan dengan komponennya. Namun, dalam hal rendering, mereka sering kali dipisahkan di DOM.
Dengan menggunakan lapisan atas, elemen yang dipromosikan adalah tempat Anda menempatkannya dalam kode sumber (misalnya, <dialog>). Tidak masalah berapa banyak lapisan di bawah DOM elemen tersebut. Kode akan dipromosikan ke lapisan teratas dan Anda dapat memeriksanya di tempat yang Anda inginkan, yang ditempatkan bersama dengan HTML komponen Anda. Hal ini memudahkan pemeriksaan elemen pemicu dan elemen yang dipromosikan di DOM secara bersamaan. Terutama berguna jika elemen pemicu Anda melakukan pembaruan atribut, misalnya. Hal ini juga memiliki manfaat tambahan untuk aksesibilitas karena elemen-elemen ditempatkan di lokasi yang sama.
Untuk menggambarkan lapisan teratas versus z-index tinggi, pertimbangkan demo ini.
Dalam demo ini, Anda dapat membuka pop-up SweetAlert dan juga membuka lapisan atas <dialog>. Buka <dialog>, lalu coba buka pop-up SweetAlert. Anda akan melihatnya muncul di bawah elemen lapisan atas. Dan root pop-up SweetAlert kita menggunakan z-index dari 10000 dengan position: fixed.
.swal-overlay {
z-index: 10000;
position: fixed;
}
Anda tidak perlu menerapkan gaya apa pun ke <dialog> untuk membuatnya muncul di atas semua konten lainnya.
DevTools
Dan ini membawa kita ke dukungan DevTools. Chrome DevTools menambahkan dukungan untuk elemen lapisan atas agar Anda bisa memeriksa lapisan teratas. Hal ini mempermudah debug dan visualisasi bagaimana sesuatu menumpuk di lapisan atas atau apa yang ada di lapisan atas.
Alina Varkki memiliki artikel bagus yang membahas penggunaan alat-alat ini secara mendalam. Keduanya saat ini tersedia sebagai fitur pratinjau di Chrome Canary versi 105.
Selesai!
Pengantar singkat tentang lapisan atas. Memungkinkan Anda mengucapkan "Sampai jumpa!" hingga hal-hal seperti:
.popup-container {
z-index: 10000;
}
Apa yang akan Anda dorong ke Lapisan Atas? Sudahkah Anda mencoba dialog? Atau mencoba OpenUI Popover API? Beri tahu kami.