web-dev-qa-db-fra.com

ombre portée css3 sous un autre div, z-index ne fonctionne pas

j'essaie d'utiliser une ombre portée pour donner l'impression qu'un div (l'en-tête) est "supérieur" à un autre. mon problème est que le "milieu" div couvre l'ombre portée. J'ai essayé d'utiliser z-index pour mettre l'en-tête div à propos du div moyen, mais cela ne fonctionne pas (l'ombre est toujours couverte). quand je mets une pause entre les divs, je peux voir l'ombre et donc je sais qu'une partie du 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.

csshtmlcss3z-indexdropshadow
86
vee

Le z-index propriété ne fonctionne que sur positionné éléments. Ceux-ci incluent position: relative, position: absolute, position: fixed, et position: sticky éléments.

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

153
gearsdigital

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

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

17
wittmason

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 d'avoir z-index: -1, qui (du moins dans Chrome) a gâché les effets de survol du lien du curseur et a causé 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;
}
7
thaddeusmt