Kimse size Z-index'ten bahsetmedi. Z-Dizin Açıklayın: CSS ile öğeleri nasıl konumlandırılır?

Z-indeks sorunu, birçok şeyin nasıl çalıştığını anlamadığıdır.
Aşağıda açıklanan şey W3C şartnamesindedir. Ne yazık ki, herkes okumadı.

Problemin tanımı:

Öyleyse, 3 elementten oluşan bir HTML koduna sahip olalım.
Her biri birinde bir tane içeriyor. Ve herkes, sırasıyla kendi arka planı vardır: sırasıyla kırmızı, yeşil ve mavi. Artı, her biri belgenin kesinlikle sol üst kenarı tarafından yerleştirilmiş bir şekilde ondan biraz üzerinde örtüşecek şekilde yerleştirildi. Birincisi, 1'e eşit bir Z endeksine sahiptir, kalan iki z endeksi belirtilmemiştir.

Aşağıdakiler, temel CSS tasarımına sahip bir HTML kodudur.

.Red, .green, .blue (pozisyon: mutlak;) .Red (arka plan: kırmızı; z-index: 1;) .Green (arka plan: yeşil;) .Blue (arka plan: mavi;)
Jsfiddle örneği

Bir görev: Kırmızı, kırmızı ve yeşilin arkasında, aşağıdaki kuralların hiçbirini rahatsız etmeyecek şekilde yapılır:

• HTML işaretlemesini değiştiremezsiniz
• Öğelere Z-Dizin'i değiştiremez / ekleyemezsiniz
• Öğelere konumlandırmayı değiştiremez / ekleyemezsiniz

Karar:

Çözelti, ilk (kırmızı ebeveyn) için birden az saydamlık eklemektir.
İşte bunu gösteren CSS:
DIV: Birinci Çocuk (Opaklık: .99;)

Hmm, burada bir şey yanlış. Genel olarak şeffaflık nerede? Örtüşen unsurların sırasını nasıl etkileyebilir? Aynı şeyi düşünüyor musun? Kulübe hoşgeldin!
Umarım makalenin ikinci bölümünde her şey yere girecek.

ELBİSLERİ İNCELEME İÇİN YORUMU:

Z-index çok basit görünüyor: daha fazla değer, bize daha yakın olan öğe, yani Z-index 5 öğesi, elemanı Z-index 2 ile örtüşecek, sağ mı? Tam olarak değil.
Bu Z-index sorunudur. Her şey çok açık görünüyor ki çoğu geliştiricinin bu sorunu keşfetmek için yeterli zaman ödemiyor.

HTML belgesindeki herhangi bir öğe önden veya arka planda olabilir. Bu herkes tarafından bilinir. Bu prosedürü belirten kurallar açıklamada açıkça açıklanmıştır, ancak yukarıda söylediğim gibi, hepsi onları tamamen anlamıyor.

Z-Dizin ve konumlandırma özellikleri belirtilmemişse, her şey basittir: Kaplama sırası, HTML'deki elemanların sırasına eşittir. (Aslında her şey biraz daha zordur, ancak üst üste binen küçük harfler için olumsuz girdap değerlerini kullanana kadar, aşırı durumlarla karşılaşmayacaksınız)

Açıkça konumlandırma öğelerini (ve çocuklarını) belirlerseniz, bu tür öğeler açıkça belirtilen bir konumlandırma özelliği olmadan elemanları üst üste gelir. (Konuşma "açıkça konumlandırmayı belirtin" - Statik, örneğin: mutlak veya akraba hariç herhangi bir değer demek istiyorum.

Son olarak, Z endeksi belirtildiğinde durum. Başlamak için, büyük bir Z endeksine sahip elementlerin daha küçük bir Z endeksine sahip unsurların üstünde olacağını ve Z-index yüklü olan herhangi bir öğenin Z-Index yüklü olmadan elemanın üstünde olacağını varsaymak oldukça doğaldır. Ama bu durum böyle değil. İlk olarak, Z-index sadece açıkça konumlandırılmış öğelerde dikkate alınır. Z-dizini yerleştirilmemiş bir öğeye yüklemeye çalışırsanız, hiçbir şey olmuyor. İkincisi, Z-Dizin değerleri kaplama bağlamları oluşturabilir. Hmm, her şey çok daha zorlaştı, değil mi?

Yerleşim Bağlamı

Ortak ebeveynlere sahip olan elemanlar, birlikte ön veya arka plana taşır, kaplama bağlamı olarak bilinir. Kaplama bağlamını anlamak, Z endeksini ve unsurların dayatılması emrini anlamanın anahtarıdır.

Her bir kaplama içeriğinin HTML yapısında kendi kök elemanına sahiptir. Elemandaki yeni bir bağlamın oluşumu sırasında, tüm çocuk elemanları da bu bağlamda düşer ve yerleşimi sırasına göre yerlerini işgal eder. Öğe bir bindirme bağlamının alt kısmında bulunursa, bir milyona eşit olan Z-index'teki bile, hiyerarşinin üzerinde bulunan bir sonraki kaplama bağlamında başka bir eleman üzerinde görüntülemek için herhangi bir düşünceli ve düşünülemez bir yol olmayacaktır. .

Yeni bağlam aşağıdaki durumlarda oluşturulabilir:

• Eleman belgenin kök elemanı ise (öğe)
  Öğe statik olarak değilse ve Z-dizin değeri otomatik olarak eşit değilse
  Öğenin 1'den az şeffaflığı varsa

Bugünün Dersi, dün gibi, size CSS'de konumlandırma ve z-index denilen çok ilginç bir özellik hakkında bilgi verecek.

Bu özellik ile, 3D efekti gibi bir şey elde ederken, metin bloklarını (yalnızca metnin değil) birbirlerine yerleştirebilirsiniz.

Bu ders, web tasarımındaki yeni gelenler için çok faydalı olacaktır, çünkü teorik bilgilere ek olarak pratik örneğe bakacağız.

Netlik için, aşağıdaki iki resme bakın:

"Göreceli Konumlandırma"

"Mutlak konumlandırma"

Gördüğünüz gibi, göreceli konumlandırma ile, metinle olan blok, metin ile paragrafa göre yerleştirilir. Mutlak - tarayıcı penceresine göre.

Bu özelliğin çalışmaları da görüntüyü açıklamak daha kolaydır:

Daha yüksek bir değeri olan eleman yukarıda olacaktır.

Şimdi demosumuzu daha ayrıntılı olarak görelim.

1. blok oluşturma

# Katman1 (
arka plan: # 707070;
renk: #FFF;
konum: Göreceli;
genişlik: 800px;
yükseklik: 450px;
}

Stilleri kullanarak, bu blok göreceli konumlandırmayı veriyoruz. Bunun sayesinde içeride ek bloklar koyabiliriz.

2. blok oluşturma

1. blok ile analoji ile bir blok oluşturun. Bu ünite yalnızca tanımlayıcı tarafından farklıdır (id \u003d "katman2").

# Katman2 (
arka plan: # f9ad81;
renk: #FFF;
konum: Mutlak;
Üst: 40px;
sol: 50px;
genişlik: 400px;
yükseklik: 400px;
z-index: 1;
}

İkinci blok mutlak konumlandırma sağlar. Şimdi kesinlikle ilk içinde olacak ve asla hiçbir yere gitmeyecek. Ek olarak, Z-index özniteliğini tanımlarız (\u003d 1). Bu, 2 numaralı blokun ilkin üstünde olacağı anlamına gelir.

3. blok oluşturma

# Katman3 (
arka plan: # 6dcff6;
renk: #FFF;
konum: Mutlak;
Üst: 80px;
sol: 100px;
genişlik: 600px;
yükseklik: 200px;
z-index: 2;
}

Bu blokta Z-index \u003d 2.

Endeksleri bloklardan değiştirmeyi ve sonuca bakmayı deneyebilirsiniz.

Unutmayın ki, daha küçük bir Z endeksine sahip öğenin her zaman daha yüksek olan bir unsur altında olacağını unutmayın. Yani, 1 Endge \u003d 999'u ve 2 - 1000 numaralı blokta blok verebilirsiniz. Sonuç aynı olacaktır.

Bugün her şey! Dikkatiniz için teşekkürler!

Pembe kare, yeni bir kaplama bağlamı oluşturan, otomatik olarak bir Z-index değeridir. Kaplama bağlamının görünümü, çocuk elemanlarının nasıl görüntülendiğini etkiler.

Gül Meydanı'nın kızı elemanlarının emrini değiştirebilirsiniz. Ancak onlar z-index sadece kaplama bağlamında mantıklı. Bu, maviden önce turuncu bir kareyi ayarlayamayacağımız anlamına gelir, çünkü bunlar farklı kaplama bağlamlarında.

Mavi ve turuncu karelerin aynı kaplama bağlamının bir parçası olmasını istiyorsak, pembe bir karenin kız elemanıyla mavi bir kare yapabiliriz. Bu, mavi kareyi turuncu için hareket ettirir.

https://codepen.io/ivhed/pen/ergoje.

Kaplama bağlamı sadece Z-index özelliğini uygularken değil. Öğeleri kaplama bağlamları oluşturan diğer birçok özellik vardır. Bazı örnekler: filtre (filtre), opaklık (opaklık) ve dönüşüm (dönüşüm).

Önceki örneğimize geri dönelim. Mavi kare yine pembe ile ilişkilidir. Şu anda, pembe bir kareye sahip bir Z endeks özelliği eklemek yerine, buna bir filtre uyguluyoruz.

Mavi, .Pink, .orange (
Konum: Mutlak;
) .pink (
Filtre: Hue-rotate (20deg);
) .Blue (
Z-index: 2;
) .Onge (
Z-index: 3;
) .Yeşil (
Z-index: 100;
}

https://codepen.io/ivhed/pen/lmwmqb.

Turuncu kare hala maviden daha yüksek bir Z dizisine sahiptir, ancak yine de arkasında görünür. Bu, filtre değerinin pembe kareyi yeni bir kaplama bağlamı oluşturmak için zorladığı gerçeğinden kaynaklanmaktadır.

Özet

Öğeleri konumlandırmak için Z-indexini kullanarak, örtüşme varsayılan elemanları değiştirebiliriz.

Belirli CSS özelliklerini uygularken, eleman bir kaplama bağlamı oluşturabilir. Z-index değerleri sadece aynı kaplama bağlamında anlam ifade eder.

Z-index özelliğinin çalışma prensibi hakkında daha fazla bilgi için, bu makaleyle kendinizi tanımanızı öneririm. Bu yayında çalışma sürecinde bana ilham verendi.

Z-Dizin Mülkiyet Yönetir sıradan kaplama Durumlarda birbirlerine üst üste bindiklerinde konumlandırılmış öğeler. Mülkiyetin tamamı olumlu ve negatif değerler alır.

Normal konumda, pozisyon: statik elemanlar, HTML belgesinde tanımlandıkları sırayla sırayla birer birer yerleştirilir. Varsayılan Z-Dizin: Otomatik; .

İncir. 1. Z ekseni boyunca konumlandırma elemanları

Z-index özelliği, z ekseni boyunca elemanların sırasını ayarlar. Her zamanki durumda, yüksek endeks değeri olan elemanlar, ön planda bulunan, daha küçük bir değer ve otomatik değeri olan elemanları üst üste binecektir.

İncir. 2. Konumlandırılmış öğelerdeki Z-index'in özelliklerinin etkisi

Yerleşim Bağlamı

Z-dizin ve konum özelliğinin elemanları belirtilmemişse, kaplama bağlamı kaynak kodundaki konumlarının sırasına eşittir. Elementler için Z-dizini belirtilmemişse, tarayıcı sayfadaki öğeleri aşağıdaki sırayla görüntüler:

Kök elemanı

Kaynak kodunda aşağıdakilerin sırasına göre konumlandırılmış konum öğeleri. Sonuncusu ön planda bulunacak.

İncir. 3. 3D alandaki elemanların bulunduğu yeri varsayılan olarak

Çizimden görülebileceği gibi, konumu olan eleman: mutlak; Ön planda, sonra metin gider, altında yüzer yüzer elemanlar vardır: sol; Konumlandırılmış blok elemanları arka planda bulunur (Kayan ve konumlandırılmış elemanlar akıştan çıkarıldığından, bloklar konumlandırılmamış, göz ardı edilmez ve işaretlemeye göre, bu nedenle eleman