Üst katman, tarayıcı görüntü alanında ilgili document değerinin üzerinde yer alır ve her document ilişkili bir üst katmana sahiptir. Diğer bir deyişle, en üst katmana yükseltilen öğelerin z-index veya DOM hiyerarşisiyle ilgilenmesi gerekmez. Ayrıca üzerinde oynayabilecekleri düzgün bir ::backdrop sözde öğesi de elde ediyor. Tam ekran, dialog desteği sunulmadan önce kullanılan en üst katmana mükemmel bir örnek olduğu için Fullscreen API spesifikasyonu daha fazla ayrıntı sağlıyor.
Üst katman, document katmanının 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 özelliğinin üst katmanda etkisi yoktur.
- Üst katmandaki her bir öğenin, stilize edilebilir 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 en üstte görünür. Tanıtmak istediğiniz bir öğeyi kaldırıp yeniden ekleyin.
Şimdiye kadar üst katmanı nasıl taklit ettik? Geliştiricilerin, body kodunun sonunda boş bir kapsayıcı öğe bıraktığını görmek alışılmadık bir durum değildir. Sonrasında bu "sahte" üst katmanız var. Buradaki ana fikir, bu kapsayıcının gruptaki diğer her şeyin üzerine yerleştirilmesidir. Bir şeyi diğer her şeyin üzerinde tanıtmak istediğinizde, söz konusu kapsayıcıya eklersiniz. Bunu SweetAlert, reactjs-popup, Magnific Popup gibi 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 tanıtabilirsiniz.
Kullanıcı arayüzü çerçeveleri, tanıtılan öğeleri, bileşen eşdeğerleriyle birlikte konumlandırmamıza olanak tanır. Ancak bunlar, oluşturma söz konusu olduğunda genellikle DOM'de ayrı tutulur.
Üst katmanı kullandığınızda, tanıtılan öğeler kaynak kodunuza yerleştirdiğiniz öğeler olur (örneğin, <dialog>). Öğenin DOM'de aşağı doğru kaç katman olduğu önemli değildir. En üst katmana yükseltilir ve bileşen HTML'nizle aynı yerde bulunmasını istediğiniz yerde inceleyebilirsiniz. Bu, DOM'de hem tetikleyici öğesinin hem de tanıtılan öğenin aynı anda denetlenmesini kolaylaştırır. Özellikle tetikleyici öğeniz, özellik güncellemeleri yapıyorsa kullanışlıdır. Bu, öğeler aynı yerde bulunduğundan artık erişilebilirlik açısından ek bir avantaj sağlar.
Üst katman ile yüksek z-index katmanı karşılaştırmasını görmek için bu demoyu kullanabilirsiniz.
Bu demoda bir SweetAlert pop-up'ı ile üst <dialog> katmanını açabilirsiniz. <dialog> uygulamasını, ardından SweetAlert pop-up'ını açmayı deneyin. Bunu üst katman öğemizin altında görürsünüz. SweetAlert pop-up'ımızın kökünde position: fixed ile 10.000'lik bir z-index kullanılıyor.
.swal-overlay {
z-index: 10000;
position: fixed;
}
<dialog> öğesinin diğer tüm içeriklerin üstünde görünmesi için öğeye herhangi bir stil uygulamanız gerekmez.
Geliştirici Araçları
Böylece Geliştirici Araçları desteğine geliyoruz. Chrome Geliştirici Araçları, üst katmanı inceleyebilmeniz için üst katman öğeleri için destek ekliyor. Bu sayede hata ayıklamak ve öğelerin üst katmanda nasıl yığıldığını, hatta en üst katmanda neler olduğunu görselleştirmek kolaylaşır.
Alina Varkki, bu araçların kullanımıyla ilgili ayrıntılı bir makaleye sahip. Şu anda Chrome Canary 105 sürümünde önizleme özelliği olarak kullanıma sunulmuştur.
Hepsi bu kadar!
Üst katmana kısa bir giriş. "Güle güle!" demeyi mümkün kılmak Örneğin:
.popup-container {
z-index: 10000;
}
Üst Katman'a ne aktarırsınız? dialog uygulamasını denediniz mi? Veya OpenUI Popover API'ye göz atın mı? Bunu bize bildirin!