Z dizini, yani (Ben 2 alırsanız ya da bir sayfada daha sabit konum öğelerinin üst üste istiflenmiş göstererek bir durum var sabit bir pozisyon elemanı

Question

içindeki mutlak konumlandırma ile beklendiği gibi davranmıyor ikincisinin tepesi ilkinin tabanına dayanıyor - bu elemanların z-indeksli istiflemesi yok). İlk sabit konum elemanının içinde, sabit ebeveynden daha uzun olan, mutlak şekilde yerleştirilmiş bir eleman vardır, bu yüzden bu sabit ebeveynin dibinden daha uzağa uzanır.

sorun sonraki sabit pozisyon eleman mutlak olarak konumlanmış eleman üstünde görüntülenen alır olmasıdır. Kesinlikle konumlandırılmış eleman üzerinde sabit konumlandırılmış elemanlardan daha yüksek bir z-indeks değeri var, ama tamamen yok sayılıyor. konuya açıklık yardımcı olmak

, birlikte bu örneği koyun:

HTML

<div class="fixed first"> 
    <p>This is a fixed element</p> 
    <p class="abs"> 
     I should be displayed above both fixed position elements 
    </p> 
</div> 
<div class="fixed second"> 
    <p>This is a fixed element</p> 
</div> 

CSS

.fixed { 
    font-size: 16px; 
    background: #eee; 
    border-bottom: 1px solid #ccc; 
    position: fixed; 
    height: 3em; 
    width: 100%; 
    z-index: 1; 
} 

.abs { 
    position: absolute; 
    background: #acc; 
    height: 6em; 
    top: 0; 
    left: 25%; 
    width: 50%; 
    z-index: 2; 
} 

.second { 
    top: 3.0625em; 
} 

İşte

JSFiddle çalışan örnek:

http://jsfiddle.net/GS4E4/8/

Bu konuda çok şaşırdım. Bunun neden olduğuna dair bir açıklaması var mı ve bunun etrafında çalışmak için bir yol var mı?

Answer 1

, tüm yığılan bağlamlar aşağı gelir. Bu durumda, .fixed öğelerinin ikisi de position: fixed; olması nedeniyle kendi yığınlama bağlamlarını oluşturur. İlk .fixed öğesinin alt üst öğesinde iç içe bir yığın bağlamı yaratır. Mevcut bir istifleme bağlamının içinde barındırıldığı için, hiçbir zaman daha fazla kırılamaz ve istiflenebilir. onun z-endeksi şimdi ebeveyne göre.

Spec aslında detaylarla büyük ölçüde faydalıdır: http://www.w3.org/TR/CSS2/visuren.html#z-index. Numaralandırılmış listeden çocuk istifleme bağlamlarının son ölü olarak boyanmış olduğunu görebilirsiniz.

Sizin durumunuzda, .fixed.first öğenizin çocuğunun .fixed.second üzerinde yığılması için bir z-endeksi 2 olması gerekir.

Answer 2

Taşı hem div dışında .abs.

<div class="fixed first"> 
    <p>This is a fixed element</p> 
</div> 
<div class="fixed second"> 
    <p>This is a fixed element</p> 
</div> 
<p class="abs"> 
     I should be displayed above both fixed position elements 
    </p> 

sizin keman doğru yorumluyor, http://jsfiddle.net/GS4E4/9/ bunu şimdi .second yukarıda yukarıda .first ama oturup bu yüzden .first göre konumlandırılan .abs var yolu bakınız. Pete'in comment ima olarak