css3 ombre scope sous un autre div, z-index ne fonctionne pas

J’essaie d’utiliser une ombre scope pour faire croire qu’une div (l’en-tête) est une autre. mon problème est que le div “middle” couvre l’ombre scope. J’ai essayé d’utiliser z-index pour placer l’en-tête div sur le div du milieu, mais cela ne fonctionne pas (l’ombre est toujours couverte). quand je fais 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:

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.

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

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

Essayez une ombre de zone d’encart sur l’élément sur 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 permettra de réduire le shuffle z-index et vous serez beaucoup plus heureux à long terme.

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 , ce qui (au moins dans Chrome) avait gâché les effets de survol du lien du curseur et provoqué d’autres problèmes étranges.

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

Voici le code simplifié:

 
Header Content
Test Content
#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; }

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