z-endeksi sabit konumlandırma ile çalışmıyor

422

Ben bir divvarsayılan konumlandırma (yani position:static) ve divbir fixedkonum.

Elemanların z-indekslerini ayarlarsam, sabit elemanın statik elemanın arkasına geçmesi imkansız görünmektedir.

    #over {
      width: 600px;
      z-index: 10;
    }
    
    #under {
      position: fixed;
      top: 5px;
      width: 420px;
      left: 20px;
      border: 1px solid;
      height: 10%;
      background: #fff;
      z-index: 1;
    }
    <!DOCTYPE html>
    <html>
       <body>
          <div id="over">
             Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
          </div>  
          <div id="under">
          </div>
       </body>
    </html>
Snippet'i genişlet

Veya burada jsfiddle'da: http://jsfiddle.net/mhFxf/

position:absolute Statik elemanı kullanarak bu sorunu çözebilirim, ama kimse bunun neden olduğunu söyleyebilir mi?

(Buna benzer bir soru var gibi görünüyor, ( Sabit Konumlandırma kırma z-endeksi ) ama tatmin edici bir cevabı yok, bu yüzden bunu burada örnek kodumla soruyorum)

css  z-index 
— DanSingerman
kaynak

Yanıtlar:

146

Bu soru çeşitli şekillerde çözülebilir, ancak gerçekten, istifleme kurallarını bilmek sizin için en iyi cevabı bulmanızı sağlar.

Çözümler

<html>Eleman yüzden sadece yığın içeriğine iç istifleme kurallarına uymalı ve bu elemanlar bu sırada dizilir göreceksiniz, tek istifleme bağlamdır

  1. Yığın bağlamının kök öğesi ( <html>bu durumda öğe)
  2. Negatif z-endeksi değerlerine sahip konumlandırılmış öğeler (ve alt öğeleri) (daha yüksek değerler daha düşük değerlerin önünde yığınlanır; aynı değere sahip öğeler HTML'deki görünüme göre yığınlanır)
  3. Konumlandırılmamış öğeler (HTML'deki görünüme göre sıralanmıştır)
  4. Otomatik olarak z-endeksi değeri (HTML'de görünüme göre sıralanmış) olan konumlandırılmış öğeler (ve alt öğeleri)
  5. Pozitif z-endeksi değerlerine sahip konumlandırılmış öğeler (ve alt öğeleri) (daha yüksek değerler daha düşük değerlerin önünde yığınlanır; aynı değere sahip öğeler HTML'deki görünüme göre yığınlanır)

Böylece yapabilirsiniz

  1. #underkonumlandırılmış -ve z-endeksi, konumlandırılmamış #overöğenin arkasında görünür olarak -1 için z-endeksi ayarlama
  2. konumunu ayarlamak #overiçin relativebu kural 5 kendisine geçerlidir böylece

Gerçek Sorun

Geliştiriciler, öğelerin yığınlanma sırasını değiştirmeye çalışmadan önce aşağıdakileri bilmelidir.

  1. İstifleme bağlamı oluştuğunda
    • Varsayılan olarak, <html>öğe kök öğedir ve ilk yığın içeriğidir
  2. İstifleme bağlamında istifleme sırası

Aşağıdaki Yığınlama sırası ve yığınlama bağlam kuralları bu bağlantıdan

İstifleme bağlamı oluştuğunda

  • Öğe, bir belgenin ( <html>öğe) kök öğesi olduğunda
  • Bir öğenin statik dışında bir konum değeri ve otomatik dışında bir z dizini değeri olduğunda
  • Bir öğenin opaklık değeri 1'den düşük olduğunda
  • Bazı yeni CSS özellikleri de yığın bağlamları oluşturur. Bunlar şunları içerir: dönüşümler, filtreler, css bölgeleri, sayfalanmış ortam ve muhtemelen diğerleri. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
  • Genel bir kural olarak, bir CSS özelliği bir ekran dışı bağlamda oluşturulmayı gerektiriyorsa, yeni bir yığın bağlamı oluşturması gerektiği görülmektedir.

İstifleme Bağlamında Sıralama Düzeni

Elemanların sırası:

  1. Yığın bağlamının kök öğesi ( <html>öğe varsayılan olarak tek yığın içeriğidir, ancak herhangi bir öğe yığın içeriği için bir kök öğe olabilir, yukarıdaki kurallara bakın)
    • Bir alt öğeyi kök yığın bağlam öğesinin arkasına koyamazsınız
  2. Negatif z-endeksi değerlerine sahip konumlandırılmış öğeler (ve alt öğeleri) (daha yüksek değerler daha düşük değerlerin önünde yığınlanır; aynı değere sahip öğeler HTML'deki görünüme göre yığınlanır)
  3. Konumlandırılmamış öğeler (HTML'deki görünüme göre sıralanmıştır)
  4. Otomatik olarak z-endeksi değeri (HTML'de görünüme göre sıralanmış) olan konumlandırılmış öğeler (ve alt öğeleri)
  5. Pozitif z-endeksi değerlerine sahip konumlandırılmış öğeler (ve alt öğeleri) (daha yüksek değerler daha düşük değerlerin önünde yığınlanır; aynı değere sahip öğeler HTML'deki görünüme göre yığınlanır)
— Mr_Moneybags
kaynak
3
Bazıları da yararlı bulabilir: Kimse Z-Endeksi Hakkında Söylemedi
— Mentalist
450

position: relative;#Over'e ekle

    #over {
      width: 600px;
      z-index: 10;
      position: relative;    
    }
    
    #under {
      position: fixed;
      top: 5px;
      width: 420px;
      left: 20px;
      border: 1px solid;
      height: 10%;
      background: #fff;
      z-index: 1;
    }
    <!DOCTYPE html>
    <html>
    <body>
    	<div id="over">
    		Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
    	</div>  
    
    	<div id="under"></div>
    </body>
    </html>
Snippet'i genişlet

Vaktini boşa harcamak

— stephenmurdoch
kaynak
14
updates.html5rocks.com/2012/09/… , sabit, mutlak ve göreli konumun z-endeksi ile nasıl etkileşime girdiğine dair mükemmel bir referanstır.
— mü
@marflar Benim için zevkti. Btw, kemanına bir bak. sonunda ekstra bir etiket </body>ve ekstra bir etiket var </html>.
— Michel Ayres
2
İşte yığın bağlamını gösteren bir keman . Bu anlatılmış burada .
— kdbanman
position: relativeAşırı elemandan kaldırmak aslında sorunumu düzeltti.
— Alex G
thanksssssss <3
— Karl Anthony Baluyot
32

Z-endeksi yalnızca belirli bir bağlam yani içinde çalışır relative, fixedya da absolutepozisyon.

göreceli bir div için z-endeksininz-index kesinlikle veya sabit bir div ile ilgisi yoktur .

EDIT Bu tamamlanmamış bir cevaptır. Bu cevap yanlış bilgi verir. Lütfen @ Dansingerman'ın yorumunu ve aşağıdaki örneği inceleyin.

— cusimar9
kaynak
3
Belirli bir bağlamda z-endeksinin nasıl çalıştığını genişletebilir ve / veya referans verebilir misiniz?
— DanSingerman
13
z-endeksi, biri konuma göreli ve diğeri mutlak olsa bile iki divin sırasını etkiler.
— Raffael
65
Bu cevap yanlış. İşte burada açıklandığı gibi yığın bağlamını gösteren bir keman . @Dansingerman.
— kdbanman
1
JsFiddle @kbdanman için teşekkürler, istifleme bağlamını bir görselle anlamama yardımcı oldu.
— dhruvpatel
8
@JoeMorano, Yüksek z, mutlak veya göreli konumlandırmaya bakılmaksızın tepeye daha yakındır. Önemli olan belge ağacındaki düzeydir. Div 4, 5, 6 div 3'ün çocukları, div 1 ve 2 div 3'ün kardeşleridir. Div 1, div 3'ten daha yüksek bir z'ye sahiptir, bu nedenle div 1, div 3'ün ve tüm çocuklarının üstündedir. Div 2, div 3'ten daha düşük bir z değerine sahip, bu nedenle div 3 ve tüm çocukları div 2'nin üstünde
— kdbanman
31

sizin beri overdiv bir konumlandırma yoktur, z-index nerede ve nasıl konumlandırmak için bilmiyor (ve ne göre?). Sadece div'inizin konumunu göreceli olarak değiştirin, bu nedenle bu div üzerinde hiçbir yan etkisi yoktur ve daha sonra under div iradesine uyacaktır.

jsfiddle ile ilgili örnek: Fiddle

edit : Birisi zaten bu cevap bahsetti görmek!

— ciddiyim
kaynak
18

#underNegatif verin z-index, örn.-1

Bunun nedeni, z-indexözelliğin position: static;varsayılan değer olması nedeniyle yok sayılmasıdır ; böylece yazdı CSS kodunda, z-indexolduğu 1olursa olsun bunu ne kadar yüksek hem elemanları #over.

#underNegatif bir değer vererek , herhangi bir z-index: 1;öğenin arkasında , yani #over.

— Carlos Precioso
kaynak
Ben de bu sorunu vardı - 'under' div 0 için ayarlamak benim için çalıştı.
— Mick Sear
5

Bir gezinme menüsü yapıyordum. Ben overflow: hiddenher şeyi sakladı benim nav en css. Bunun bir z-endeksi problemi olduğunu düşündüm, ama gerçekten nav'ım dışındaki her şeyi saklıyordum.

— thedanotto
kaynak
0

CSS Spec'te tanımlandığı gibi sabit elemanların (ve mutlak elemanların) davranışı:

Belgeden ayrıldıklarında ve en yakın sabit / mutlak konumlandırılmış ebeveyne yerleştirildiklerinde davranırlar. (kelime alıntı ile bir kelime değil)

Bu, zindex hesaplamasını biraz karmaşık hale getirir, vücut öğesinde dinamik olarak bir kap oluşturarak ve bu tür öğeleri (vücut sabit öğesinin içinde "sabit olanlar" olarak sınıflandırılır) hareket ettirerek sorunumu (aynı durum) çözdüm )

— Bakhshi
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.