2011-03-31 39 views
70

Tengo una sombra de caja en mi div #primaryNav. Desafortunadamente, la sombra está siendo cubierta/oculta por el fondo del siguiente elemento #page.Sombra de caja de CSS oculta (el índice Z no se corrige)

He intentado establecer un índice z de 100 a #primaryNav y un índice z de -100 a #página, pero eso no soluciona mi problema.

¿Alguna idea de lo que estoy haciendo mal?

+0

¿Dónde debería estar esta sombra, en la parte superior o inferior de la nav? –

Respuesta

0

He echado un vistazo a su sitio y creo que la propiedad border-bottom de #primaryNav está cubriendo su sombra.

114

Debe definir la posición para #primaryNav. El índice Z solo afecta a los elementos posicionados. Acabo de añadir esto en firebug y fijo:

#primaryNav { 
    position: relative; 
} 

que evitaría el uso de un índice z negativa. Simplemente cambie el índice Z de #page a 0.

+5

Perfecto. No sabía eso sobre el índice Z y los elementos posicionados. Muchas gracias. – Tophers

+3

esta es la respuesta correcta. OP debería marcarlo en consecuencia – Mansiemans

+2

Has guardado mi trabajo. Gracias. –

3

Como ya dijo jlego, una posición relativa debería solucionarlo. Por cierto, sugeriría asegurar que no haya sombras a la izquierda o derecha del #primaryNav. Como el #primaryNav tiene un ancho del 100%, una sombra lateral hace que aparezca una barra de desplazamiento horizontal.

para la fijación de esto usted podría establecer un overflow:hidden-#iframe

+0

Buen consejo, gracias. – Tophers

Cuestiones relacionadas