Üst katman, tarayıcı görünümünde ilgili document öğesinin üzerinde bulunur ve her document, bir adet ilişkilendirilmiş üst katmana sahiptir. Diğer bir deyişle, en üst katmana yükseltilen öğelerin z-index veya DOM hiyerarşisi konusunda endişelenmesine gerek yoktur. Ayrıca, oynayabilecekleri şık bir ::backdrop sözde öğesine de sahipler. dialog desteği sunulmadan önce kullanılan en üst katman Tam ekran için mükemmel bir örnekti. Bu nedenle Tam Ekran API spesifikasyonu daha ayrıntılı bir şekilde açıklanmış.
Üst katman, document öğesinin geri kalanının üzerinde içerik oluşturma sorununu çözmeye yardımcı olur.
Unutulmaması gereken önemli noktalar:
- Üst katman, document akışının dışında.
- z-index, üst katmanda herhangi bir etkiye sahip değil.
- Üst katmandaki her öğenin, biçimlendirilebilir bir ::backdrop sözde öğesi vardır.
- Her öğe ve ::backdrop, yeni bir yığın bağlamı oluşturur.
- Üst katmandaki öğeler, kümede göründükleri sırayla yığılır. Sonuncusu üstte görünür. Bir öğeyi tanıtmak istiyorsanız ilgili öğeyi kaldırıp tekrar ekleyin.
Şimdiye kadar en üst katmanı nasıl taklit ettik? Geliştiricilerin body öğesinin sonunda boş bir kapsayıcı öğe bırakması son derece normaldir. Daha sonra, bu, "sahte" üst katman olarak kullanılacaktır. Buradaki fikir, kapsayıcının yığındaki diğer her şeyin üzerine yerleştirilmesidir. Bir öğeyi diğer her şeyin üzerinde tanıtmak istediğinizde, öğeyi bu kapsayıcıya eklersiniz. Bunu SweetAlert, reactjs-popup, Magnific Popup ve diğer popüler paketlerde görebiliriz.
<dialog> ve "Popover" gibi yeni yerleşik bileşenler ve API'ler sayesinde bu geçici çözümlere başvurmanız gerekmez. İçeriği en üst katmana yükseltebilirsiniz.
Kullanıcı arayüzü çerçeveleri, tanıtılan öğeleri, bileşen karşılıklarıyla bir araya getirmemize olanak tanır. Ancak, oluşturma söz konusu olduğunda genellikle DOM'de ayrı olurlar.
Üst katmanı kullandığınızda, tanıtılan öğeler kaynak kodunuzda yerleştirdiğiniz yerdir (örneğin, bir <dialog>). Öğenin DOM'da kaç tane katman olduğu önemli değildir. Öğe en üst katmana yükseltilir ve olmasını beklediğiniz yerde, bileşen HTML'nizle aynı konumda yer alan öğeyi inceleyebilirsiniz. Bu, DOM'deki hem tetikleyici öğenin hem de tanıtılan öğenin aynı anda incelenmesini kolaylaştırır. Bu, özellikle tetikleyici öğeniz özellik güncellemeleri yapıyorsa yararlıdır. Bu, öğeler aynı konuma yerleştirildiği için erişilebilirlik açısından da ek bir avantaj sağlar.
Üst katman ile yüksek z-index karşılaştırmasını görmek için bu demoyu kullanabilirsiniz.
Bu demoda bir SweetAlert pop-up'ı ve ayrıca bir üst katmanı (<dialog>) açabilirsiniz. <dialog> klasörünü açıp SweetAlert pop-up'ını açmayı deneyin. Üst katman öğemizin altında göründüğünü fark edeceksiniz. Ayrıca, SweetAlert pop-up penceremizin kökü, position: fixed için 10.000 değerini z-index olarak kullanmaktadır.
.swal-overlay {
z-index: 10000;
position: fixed;
}
Diğer tüm içeriklerin üzerinde görünmesi için <dialog> öğesine herhangi bir stil uygulamanız gerekmez.
DevTools
Böylece Geliştirici Araçları destek ekibine ulaşıyoruz. Chrome Geliştirici Araçları, üst katmanı inceleyebilmeniz için üst katman öğeleri için destek ekliyor. Bu, hata ayıklamayı ve öğelerin üst katmanda nasıl yığıldığını veya en üst katmanda nelerin bulunduğunu görselleştirmeyi kolaylaştırır.
Alina Varkki'nin bu araçların kullanımıyla ilgili derinlemesine bilgi veren mükemmel bir makalesi var. Bunlar şu anda Chrome Canary sürüm 105'te önizleme özelliği olarak kullanılabilmektedir.
Hepsi bu kadar!
Üst katmana kısa bir giriş. Aşağıdaki gibi şeylere "Hoşça kalın!" demek:
.popup-container {
z-index: 10000;
}
Üst Katmana ne aktarırdınız? dialog'i denediniz mi? OpenUI Popover API'sini mi incelediniz? Bunu bize bildirin!