css3 Schlagschatten unter einem anderen Div, Z-Index funktioniert nicht

Question

Ich versuche, einen Schlagschatten zu verwenden, damit es aussieht wie ein Div (der Header) ist "über" anderen. Mein Problem ist, dass das "mittlere" div den Schlagschatten bedeckt. Ich habe versucht, mit Z-Index den Header div über das mittlere div, aber es funktioniert nicht (der Schatten wird immer noch abgedeckt). Wenn ich eine Pause zwischen den divs mache, kann ich den Schatten sehen und daher weiß ich, dass ein Teil des Codes richtig funktioniert. Ich habe den folgenden HTML-Code:

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

und diese 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; 
} 

irgendwelche Ideen? Vielen Dank.

Answer 1

Die z-index Eigenschaft sind auf relativ, absolute oder festen positionierte Elemente funktioniert.

Versuchen Sie, Ihr div #middle eine position: relative zu geben.

Answer 2

z-index wird nicht funktionieren, wenn Ihre Elemente nicht nur position:absolute

Answer 3

Versuchen Sie einen Inset-Box-Schatten auf dem Element, unter dem Sie angezeigt werden möchten.

.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; 
} 

Dies wird die Z-Index-Shuffle lindern und Sie werden auf lange Sicht viel glücklicher sein.

Answer 4

Aufbauend auf den anderen Antworten hier, fand ich, dass dies besser funktionierte, indem position: relative auf #portal_header_light statt #middle gesetzt wurde. Dann musste ich nicht haben, was (zumindest in Chrome) die Cursor-Link-Hover-Effekte durcheinander brachte und einige andere seltsame Probleme verursachte.

http://jsfiddle.net/thaddeusmt/m6bvZ/

Hier ist der vereinfachte Code:

<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; 
}