web-dev-qa-db-fra.com

CSS shadow-box masqué (z-index ne résout pas)

J'ai une ombre sur mon #primaryNav div. Malheureusement, l'ombre est recouverte/masquée par l'arrière-plan du #page élément.

J'ai essayé de définir un z-index de 100 sur #primaryNav et un z-index de -100 à #page, mais cela ne résout pas mon problème.

Des idées sur ce que je fais mal?

cssz-indexcss3
71
Tophers

Vous devez définir le positionnement de #primaryNav. L'index Z affecte uniquement les éléments positionnés. Je viens d'ajouter ceci dans Firebug et il a corrigé:

#primaryNav {
  position: relative;
 }

J'éviterais d'utiliser un z-index négatif. Modifiez simplement l'index z de #page à 0.

120
biggles

Comme jlego l'a déjà dit, une position relative devrait le corriger. Soit dit en passant, je suggère de veiller à ce qu'il n'y ait pas d'ombre à gauche ou à droite du #primaryNav. Puisque #primaryNav a une largeur de 100% une ombre sur le côté fait apparaître une barre de défilement horizontale.

Pour résoudre ce problème, vous pouvez définir un overflow:hidden à #iframe

3
Towa

J'ai jeté un œil à votre site et je pense que le border-bottom propriété de #primaryNav recouvre votre ombre.

0
njebert