css3 alt gölge altında başka bir div, z-index çalışmıyor

Question

Bir div (header) diğerinin üzerinde "gibi" görünmesini sağlamak için bir alt gölge kullanmaya çalışıyorum. Benim problemim, "orta" div'in alt gölgeyi kaplamasıdır. div divunu orta div hakkında koymak için z-endeksi kullanmayı denedim, ama işe yaramıyor (gölge hala kaplanıyor). div'ler arasında bir ara verdiğimde, gölgeyi görebiliyorum ve bu yüzden kodun bir bölümünün düzgün çalıştığını biliyorum.

<div id='portal_header_light'> 
<img src="Home.png" height="32px" \> 
<img src="Wrench.png" height="32px" \> 
</div> 
<div id='middle'></div> 

ve bu css:

#portal_header_light { 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:12px; text-align:center; 
    -moz-border-radius: 3px 3px 3px 3px; 
    -webkit-border-radius: 3px 3px 3px 3px; 
    padding: 0px 3px 0px 3px; 
    background: -moz-linear-gradient(center top, #999999 0%,#ffffff 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #999999),color-stop(1, #ffffff)); 

    -webkit-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3); 
    -moz-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3); 
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); 

    z-index:5; 
} 

#middle{ 
    height:308px; 
    background-color:white; 
    z-index:-1; 
} 

herhangi bir fikir i aşağıdaki html kodunu var? Teşekkürler. senin elemanlar z-index özellik yalnızca göreli, mutlak veya sabit konumlandırılmış elemanlar çalışır position:absolute

Answer 1

değilse

Answer 2

z-index çalışmaz.

numaranızı position: relative numaralı telefona vermeye çalışın.

Answer 3

Altında görünmesini istediğiniz öğeye bir kutu içi gölgeyi deneyin.

.element-that-is-to-be-under{ 
    -webkit-box-shadow: inset 0 8px 4px -4px #ddd; 
    -moz-box-shadow: inset 0 8px 4px -4px #ddd; 
    box-shadow: inset 0 8px 4px -4px #ddd; 
} 

Z endeksi karıştır hafifletir Bunu yapmanız ve uzun vadede daha mutlu olacağım.

Answer 4

Diğer yanıtları burada yapıyorum, bunun, yerine 'a position: relative kodunu koyarak daha iyi çalıştığını gördüm. Daha sonra, (en azından Chrome'da) imleç bağlantı hover efektlerini karıştırdı ve diğer bazı tuhaf sorunlara neden olan z-index: -1'a sahip olmak zorunda değildim.

<div id="portal_header_light">Header Content</div> 
<div id="middle">Test Content</div> 

#portal_header_light { 
    position: relative; 
    padding: 3px; 
    background: #eee; 
    -webkit-box-shadow: 0px 4px 10px -2px rgba(0, 0, 0, 0.3); 
    -moz-box-shadow: 0px 4px 10px -2px rgba(0, 0, 0, 0.3); 
    box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.3); 
    z-index:5; 
} 

#middle{ 
    height:308px; 
    background-color:#fee; 
    padding: 3px; 
}