Üst katman, tarayıcı görüntü alanında ilgili document'nin üzerinde yer alır ve her document'nin ilişkili bir üst katmanı vardır. Bu, üst katmana yükseltilen öğelerin z-index veya DOM hiyerarşisi hakkında endişelenmesi gerekmediği anlamına gelir. Ayrıca, oynayabilecekleri şık bir ::backdrop sözde öğesi de vardır. dialog desteği sunulmadan önce kullanılan üst katmanın mükemmel bir örneği olan Tam Ekran, Tam Ekran API spesifikasyonunda daha ayrıntılı olarak ele alınmıştır.
Üst katman, içeriğin document'ün geri kalanının üzerinde oluşturulması sorununu çözmeye yardımcı olur.
Unutulmaması gereken önemli noktalar:
- Üst katman, document akışının dışındadır.
- z-index, üst katmanda hiçbir etki oluşturmaz.
- Üst katmandaki her öğenin stil uygulanabilir 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. En son eklenen en üstte görünür. Bir öğeyi öne çıkarmak istiyorsanız öğeyi kaldırıp tekrar ekleyin.
Üst katmanı şimdiye kadar nasıl taklit ettik? Geliştiricilerin body öğesinin sonuna boş bir kapsayıcı öğesi eklediğini görmek yaygın bir durumdur. Bu da "sahte" bir üst katman olarak kullanılır. Buradaki amaç, bu kapsayıcının yığıntaki diğer her şeyin üzerine yerleştirilmesidir. Bir öğeyi diğerlerinin üzerinde tanıtmak istediğinizde bu kapsayıcıya eklersiniz. Bunu SweetAlert, reactjs-popup, Magnific Popup gibi popüler paketlerde görebiliriz.
<dialog> ve "Pop-up" gibi yeni yerleşik bileşenler ve API'ler sayesinde bu geçici çözümlere başvurmanız gerekmez. İçerikleri üst katmana taşıyabilirsiniz.
Kullanıcı arayüzü çerçeveleri, tanıtılan öğeleri bileşen karşılıklarıyla birlikte konumlandırmamıza olanak tanır. Ancak oluşturma söz konusu olduğunda genellikle DOM'da ayrılırlar.
Üst katmanı kullanarak, yükseltilen öğeler kaynak kodunuza yerleştirdiğiniz yerde (örneğin, <dialog>) bulunur. Öğenin DOM'da kaç katman aşağıda olduğu önemli değildir. Öğe, üst katmana yükseltilir ve bileşen HTML'nizle birlikte bulunduğu yerde, olmasını beklediğiniz yerde inceleyebilirsiniz. Bu sayede, DOM'da hem tetikleyici öğeyi hem de tanıtılan öğeyi aynı anda inceleyebilirsiniz. Özellikle tetikleyici öğeniz özellik güncellemeleri yapıyorsa kullanışlıdır. Öğeler birlikte bulunduğundan bu, erişilebilirlik açısından da ek bir avantaj sağlar.
Üst katman ile yüksek z-index arasındaki farkı göstermek için bu demoyu inceleyin.
Bu demoda bir SweetAlert pop-up'ı ve üst katman <dialog> açabilirsiniz. <dialog>'ü açın ve ardından SweetAlert pop-up'ını açmayı deneyin. Bu öğenin, üst katman öğemizin altında göründüğünü göreceksiniz. SweetAlert pop-up'ımızın kökünde, position: fixed ile 10000 değerinde bir z-index kullanılıyor.
.swal-overlay {
z-index: 10000;
position: fixed;
}
Diğer tüm içeriğin üzerinde görünmesi için <dialog> öğesine herhangi bir stil uygulamanız gerekmez.
Geliştirici Araçları
Şimdi DevTools desteğine geçelim. Chrome Geliştirici Araçları, üst katmanı inceleyebilmeniz için üst katman öğeleri için destek ekliyor. Bu sayede, üst katmanda nelerin yer aldığını veya nelerin üst üste yığıldığını görebilir ve hata ayıklama işlemini kolaylaştırabilirsiniz.
Alina Varkki'nin bu araçları kullanmayla ilgili ayrıntılı bir makalesi var. Bu özellikler şu anda Chrome Canary sürüm 105'te önizleme özelliği olarak sunulmaktadır.
Hepsi bu kadar!
Üst katmana kısa bir giriş. Aşağıdaki gibi öğelere "Hoşçakal" demenizi sağlar:
.popup-container {
z-index: 10000;
}
Üst katmana neleri gönderirsiniz? dialog uygulamasını denediniz mi? OpenUI Popover API'yi denediniz mi? Bunu bize bildirin!