Basamaklı Stil Sayfalarıyla Örtüşen Öğeleri Konumlandırma
Web sayfası yerleşimi için CSS konumlandırmayı kullanırken karşılaşılan zorluklardan biri, bazı öğelerinizin diğerleriyle çakışabileceğidir. HTML'deki son öğenin en üstte olmasını istiyorsanız bu iyi çalışır, ancak eğer yapmazsanız ya da şu anda bunu yapmak için başkalarıyla çakışmayan öğelere sahip olmak istiyorsanız, tasarım bu "katmanlı" görünümü çağırır. ? Öğelerin üst üste gelme şeklini değiştirmek için CSS özelliğini kullanmanız gerekir.
Word ve PowerPoint'te grafik araçları veya Adobe Photoshop gibi daha güçlü bir resim düzenleyicisi kullandıysanız, o zaman eylemde z-endeksi gibi bir şey gördünüz. Bu programlarda, çizdiğiniz nesneleri / nesneleri vurgulayabilir ve belgenizin belirli öğelerini “Arkaya Gönder” veya “Öne getir” seçeneklerinden birini seçebilirsiniz. Photoshop'ta, bu işlevlere sahip değilsiniz, ancak programın "Katman" bölmesine sahipsiniz ve bu katmanları yeniden düzenleyerek bir öğenin tuvalin içine düştüğü yeri düzenleyebilirsiniz. Bu örneklerin her ikisinde de, esas olarak bu nesnelerin z dizinini ayarlarsınız.
Z-endeksi nedir?
Sayfadaki öğeleri konumlandırmak için CSS konumlandırmayı kullanırken, üç boyutta düşünmeniz gerekir. İki standart boyut vardır: sol / sağ ve üst / alt. Soldan sağa indeks, x-endeksi olarak bilinir, yukarıdan aşağıya doğru olanı ise y endeksidir. Bu iki endeksi kullanarak öğeleri yatay veya dikey olarak konumlandırabilirsiniz.
Web tasarımına gelince, sayfanın yığınlama sırası da vardır. Sayfadaki her eleman, başka herhangi bir öğenin üstünde veya altında olabilir. Z-endeksi özelliği, her öğenin yığında nerede olduğunu belirler. X-indeksi ve y-endeksi yatay ve dikey çizgiler ise, z-endeksi sayfanın derinliği, aslında 3 boyuttur.
Bir web sayfasındaki öğeleri kağıt parçaları olarak ve web sayfasını bir kolaj olarak düşünmeyi seviyorum. Kâğıdı yerleştirdiğim yer, konumlandırma ile belirlenir ve diğer elementler tarafından ne kadar kapsanması z-endeksidür.
Z-endeksi, pozitif (örneğin 100) veya negatif (örneğin -100) bir sayıdır. Varsayılan z-dizini 0'dır. En yüksek z-endeksine sahip eleman üstte, ardından bir sonraki en yüksek ve en aşağı z-endeksine kadar devam eder. İki eleman aynı z-endeks değerine sahipse (ya da tanımlanmamışsa, yani varsayılan değer 0'dır), tarayıcı bunları HTML'de göründükleri sıraya göre katmanlandıracaktır.
Z-endeksi nasıl kullanılır?
İstediğiniz her öğeyi yığında farklı bir z-dizin değeri verin. Örneğin, beş farklı öğem varsa:
- eleman 1 - z-indeksi -25
- eleman 2 - z-endeksi 82
- öğe 3 - z-endeksi ayarlanmadı
- öğe 4 - 10 z-endeksi
- eleman 5 - z-endeksi -3
Aşağıdaki sırayla yığılacaklar:
- öğe 2
- öğe 4
- öğe 3
- öğe 5
- öğe 1
Öğelerinizi yığmak için çok farklı z-dizin değerleri kullanmanızı öneririz. Bu şekilde, daha sonra sayfaya daha fazla öğe eklerseniz, diğer tüm öğelerin z-endeks değerlerini ayarlamak zorunda kalmadan bunları katmanlar haline getirebilirsiniz. Örneğin:
- En üst elementim için 100
- Orta elemanım için 0
- -100 alt elemanım için
Aynı zamanda iki öğeye de aynı z-endeksi değerini verebilirsiniz. Bu elemanlar istiflendiyse, HTML'de yazdıkları sırada en üstteki öğeyle görüntülenirler.
Bir not, bir öğenin z-endeksi özelliğini etkin bir şekilde kullanması için, bir blok seviyesi elemanı olmalı veya CSS dosyanızda bir "blok" veya "satır içi blok" görüntüsü kullanmalıdır.
Jennifer Krynin tarafından yazılmış orijinal makale. Jeremy Girard tarafından 12/09/16 tarihinde düzenlenmiştir.