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

Antworten:

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