menu emergente con lista y slider

rocktotal · #1 (**permalink**) 04/06/2011, 12:31

Hola, tengo un problema con un menu emergente hecho con css y un slider a continuación del menú hecho con css, jquery y jqFancytransitions. El problema es que cuando se despliega el menu queda por debajo del slider. La organización css es la siguiente:

- Capa contenedora de la cabecera:

capa logo
capa menu

- Capa contenedora del slider:

capa slider

He probado con las propiedades z-index pero nada. Si le doy por ejemplo un z-index a la "capa contenedora de la cabecera" de 999 y a la "capa contenedora del slider" de -999 se sigue quedando el menú por debajo.

Si le doy a la "capa menu" un z-index de 999 y a la capa "slider" un -999 desaparece el slider y el menu si que se despliega.

He consultado foros y post sobre esto y parece que todo gira en torno al z-index, pero yo no logro dar con la "tecla". A ver si alguien me dar un poco de luz, gracias!!

Naahuel · #2 (**permalink**) 04/06/2011, 13:07

Bueno hay algo que debes tener en cuenta:

1.- Sólo puedes aplicar z-index a un elemento que tenga un valor de "position" diferente de static (absolute, relative o fixed). Me imagino que tus "capas" contenedoras" no tienen ninguno de esos posicionamientos.

2.- (no estoy muy seguro de esto, pero..) Tratá de usar valores de z-index positivos y no es necesario ser tan extremista con los valores. Usar 100 y 200 por ejemplo está perfecto. Había leído alguna vez que los navegadores que respetaban los estándares de CSS2 posicionaban un elemento con z-index negativo debajo del <body> haciendo que "desaparezca".

Tené en cuenta esas consideraciones. Aplicá un z-index mayor a los elementos dentro de tu menú que tengan un posicionamiento absoluto o relativo y uno menor a los elementos de tu slider que también estén con relative o absolute.

Si eso no funciona (porque algo te está faltando) probá lo siguiente:

Código CSS:

Ver originalCapa contenedora de la cabecera{
position:relative;
z-index:200;
}
 
 Capa contenedora del slider{
position:relative;
z-index:100;
}

rocktotal · #3 (**permalink**) 05/06/2011, 12:09

Cita:

Iniciado por Naahuel

Bueno hay algo que debes tener en cuenta:

1.- Sólo puedes aplicar z-index a un elemento que tenga un valor de "position" diferente de static (absolute, relative o fixed). Me imagino que tus "capas" contenedoras" no tienen ninguno de esos posicionamientos.

2.- (no estoy muy seguro de esto, pero..) Tratá de usar valores de z-index positivos y no es necesario ser tan extremista con los valores. Usar 100 y 200 por ejemplo está perfecto. Había leído alguna vez que los navegadores que respetaban los estándares de CSS2 posicionaban un elemento con z-index negativo debajo del <body> haciendo que "desaparezca".

Tené en cuenta esas consideraciones. Aplicá un z-index mayor a los elementos dentro de tu menú que tengan un posicionamiento absoluto o relativo y uno menor a los elementos de tu slider que también estén con relative o absolute.

Si eso no funciona (porque algo te está faltando) probá lo siguiente:

Código CSS:

Ver originalCapa contenedora de la cabecera{
position:relative;
z-index:200;
}
 
 Capa contenedora del slider{
position:relative;
z-index:100;
}

pues muchas gracias, solucionado!! llevabas razón con la aplicación del z-index y el tipo de las capas. Las tenía en formato predeterminado. Sólo después de ponerlas en "relative" me ha empezado a funcionar el z-index.

Gracias!!