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

Question

Toutes mes excuses si c'est idiot.

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

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

Des idées que je fais mal?

Answer 1

Vous devez définir le positionnement pour #primaryNav . L'indice Z n'affecte que les éléments positionnés. Je viens d'ajouter ceci dans firebug et cela a corrigé:

 #primaryNav {
  position: relative;
 }
 

Je voudrais éviter d'utiliser un z-index négatif. Il suffit de changer l'indice z de #page à 0.

Answer 2

Comme jlego l'a déjà dit, un membre de la famille devrait régler le problème. En passant, je suggérerais de veiller à ce qu'il n'y ait pas d'ombre à gauche ou à droite du #primaryNav . Comme #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

Answer 3

Je pris un coup d' oeil sur votre site et je pense que le border-bottom propriété de #primaryNav couvre votre ombre.