Lapisan atas berada di atas document terkait di area tampilan browser, dan setiap document memiliki satu lapisan atas terkait. Artinya, elemen yang dipromosikan ke lapisan atas tidak perlu mengkhawatirkan z-index atau hierarki DOM. Mereka juga mendapatkan elemen pseudo ::backdrop yang rapi untuk dimainkan. Spesifikasi Fullscreen API menjelaskan lebih detail karena Layar Penuh adalah contoh yang bagus dari lapisan teratas yang digunakan sebelum dukungan dialog muncul.
Lapisan atas membantu memecahkan masalah rendering konten di atas bagian document lainnya.
Hal penting yang perlu diingat:
- Lapisan atas berada di luar alur document.
- z-index tidak berpengaruh di lapisan atas.
- Setiap elemen dalam lapisan atas memiliki elemen pseudo ::backdrop yang dapat ditata gayanya.
- Setiap elemen dan ::backdrop menghasilkan konteks tumpukan baru.
- Elemen di lapisan atas ditumpuk sesuai urutan kemunculannya dalam set. Yang terakhir masuk, muncul di atas. Jika Anda ingin mempromosikan suatu elemen, hapus dan tambahkan lagi.
Bagaimana kami meniru lapisan atas sampai sekarang? Yah, tidak jarang developer meletakkan elemen penampung kosong di akhir body. Dan lapisan ini akan digunakan sebagai lapisan atas "imitasi". Idenya adalah container ini diposisikan di atas semua elemen lainnya dalam stack. Jika Anda ingin mempromosikan sesuatu di atas segalanya, tambahkan ke penampung tersebut. Kita dapat melihatnya dalam paket populer seperti SweetAlert, reactjs-popup, Magnific Popup, dan lainnya.
Dengan komponen dan API bawaan yang baru seperti <dialog> dan "Popover", Anda tidak perlu melakukan solusi ini. Anda dapat mempromosikan konten ke lapisan teratas.
Kerangka kerja UI memungkinkan kita untuk menempatkan elemen-elemen yang dipromosikan bersama dengan komponennya. Namun, mereka sering kali dipisahkan dalam DOM dalam hal rendering.
Dengan menggunakan lapisan teratas, elemen yang dipromosikan berada di tempat Anda meletakkannya dalam kode sumber (misalnya, <dialog>). Tidak masalah berapa banyak lapisan di elemen DOM ke bawah. Elemen ini akan dipromosikan ke lapisan teratas dan Anda dapat memeriksanya di tempat yang Anda harapkan, ditempatkan bersama dengan HTML komponen Anda. Hal ini mempermudah pemeriksaan elemen pemicu dan elemen yang dipromosikan dalam DOM secara bersamaan. Terutama berguna jika elemen pemicu Anda membuat pembaruan atribut, misalnya. Perubahan ini juga memiliki manfaat tambahan untuk aksesibilitas karena elemen-elemen ditempatkan bersama.
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 melihat bahwa elemen ini muncul di bawah elemen lapisan teratas. Dan root pop-up SweetAlert 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
Hal itu membawa kita ke dukungan DevTools. Chrome DevTools menambahkan dukungan untuk elemen lapisan atas sehingga Anda dapat memeriksa lapisan atas. Hal ini mempermudah debug dan memvisualisasikan bagaimana hal-hal menumpuk di lapisan atas atau bahkan apa yang ada di lapisan atas.
Alina Varkki memiliki artikel bagus yang membahas secara mendalam cara menggunakan alat ini. Aplikasi tersebut 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 dorong ke Lapisan Atas? Sudahkah Anda mencoba dialog? Atau mencoba OpenUI Popover API? Beri tahu kami.