Z-endeksi, sahte öğe öğesinden önce

Question

Önceden sözde bir öğeye sahip bir 'başlık' öğesi oluşturdum. psödeo öğesi ana öğenin arkasında olmalıdır. Her şey 'başlık' a z-indeksi verdiğim andan itibaren harika çalışıyor.

Ne isterim: Ön planda sarı 'başlık', arka planda kırmızı sözde öğe ve sarı 'başlık' öğesindeki 30 basit z-endeksi.

header { 
    background: yellow; 
    position:relative; 
    height: 100px; 
    width: 100px; 
    z-index:30; /*This is the problem*/ 
} 

header::before { 
    content:"Hide you behind!"; 
    background: red; 
    position:absolute; 
    height: 100px; 
    width: 100px; 
    top:25px; 
    left:25px; 
    z-index:-1; 
} 

Bu bağlantıyı (http://jsfiddle.net/tZKDy/) benim problem test edebilir ve de 'başlığı' eleman z-index kaldırmak/ayarladığınızda sorun bakın.

Answer 1

Sözlü elemandan önceki :: başlık öğesinin içine yerleştirilir.

CSS Spec

:

: önce ve: sadece ilişkili eleman içine sokulur gerçek elemanlar sanki sözde elemanları diğer kutular ile etkileşim sonra.

başlık elemanı creates a new Stacking Context z-index Ayar, bu yüzden o İstifleme Bağlamında dışarıya çıkmak zorunda kalacak, çünkü Oluşturduğunuz yeni sözde eleman, başlık elemanı arkasında yüzer olamaz.

Başlık elemanından başka bir öğe ile basitçe öncelemenizi öneriyorum, bu nedenle varsayılan olarak doğru şekilde yığılıyor. Example.