CSS-Box-Shadow versteckt (Z-Index nicht behoben)

72

Ich habe einen Kastenschatten auf meinem #primaryNavDiv. Leider wird der Schatten vom Hintergrund des folgenden #pageElements verdeckt / ausgeblendet .

Ich habe versucht, einen Z-Index von 100 auf #primaryNavund einen Z-Index von -100 auf #page festzulegen, aber das behebt mein Problem nicht.

Irgendwelche Ideen, was ich falsch mache?

z-index css

— Tophers
quelle

Wo sollte dieser Schatten oben oder unten auf dem Navi sein?

— Gary Green

121

Sie müssen die Positionierung für definieren #primaryNav. Der Z-Index wirkt sich nur auf positionierte Elemente aus. Ich habe dies gerade in Firebug hinzugefügt und es wurde behoben:

#primaryNav {
  position: relative;
 }

Ich würde es vermeiden, einen negativen Z-Index zu verwenden. Ändern Sie einfach den Z-Index von #pageauf 0.

— Biggles
quelle

5

Perfekt. Wusste das nicht über Z-Index & positionierte Elemente. Vielen Dank.

— Tophers

3

Das ist die richtige Antwort. OP sollte es entsprechend markieren

— Mansiemans

1

Das ist brillant, ich bin über Z-Index bekannt, aber Sie sind die erste Person, die mir begegnet ist, die erklärt hat, dass eine Positionierung erforderlich ist, damit es funktioniert. Vielen Dank!

— Kenziiee Flavius

Danke mann. Das hat wie ein Zauber gewirkt und Sie haben eine Wissenslücke geschlossen.

— Noobcoderiam

3

Wie Jlego bereits sagte, sollte eine relative Position dies beheben. Übrigens würde ich vorschlagen, dass links oder rechts von der kein Schatten vorhanden ist #primaryNav. Da #primaryNavdie Breite 100% beträgt, wird durch einen Schatten an der Seite eine horizontale Bildlaufleiste angezeigt.

Um dies zu beheben, können Sie ein overflow:hiddenauf setzen#iframe

— Küpper
quelle

0

Ich habe mir Ihre Website angesehen und denke, dass die border-bottomEigenschaft von #primaryNavIhren Schatten verdeckt.

— njebert
quelle