css3 shadow shadow sous une autre div, z-index ne fonctionnant pas

Question

je suis en train d'utiliser une ombre portée pour la faire ressembler à un div (l'en-tête) est "au-dessus" de l'autre. mon problème est que le "milieu" div couvrant l'ombre portée. j'ai essayé avec les z-index pour mettre l'en-tête div sur le milieu de la div, mais cela ne fonctionne pas (l'ombre est encore couvert). quand j'ai mis une pause entre les divs, je peux voir l'ombre et, par conséquent, je sais que le code fonctionne correctement. j'ai le code html suivant:

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

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

des idées? merci.

Answer 1

La propriété z-index ne fonctionne que sur des éléments positionnés relatifs , absolus ou fixes .

Essayez de donner à votre div #middle a position: relative .

Answer 2

Essayez une ombre encadrée sur l'élément sous lequel vous souhaitez apparaître.

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

Cela atténuera le shuffle z-index et vous serez beaucoup plus heureux à long terme.

Answer 3

En me basant sur les autres réponses ici, j’ai trouvé que cela fonctionnait mieux en mettant position: relative sur #portal_header_light , au lieu de #middle . Ensuite, je n'avais pas besoin de z-index: -1 , ce qui (du moins sous Chrome) gâchait les effets de survol du lien du curseur et causait d'autres problèmes étranges.

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

Voici le code simplifié:

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

Answer 4

z-index ne fonctionnera pas si vos éléments ne sont pas position:absolute