Slide queda por encima de mi menú fijo

[balkyllo]

Hola!

Estoy haciendo una web (www.fer.es/compas/agm) y me ha surgido un problema, tengo una cabecera fija con un menu, cuando uso el scroll todo el contenido se oculta bajo esa cabecera, pero al pinchar en el apartado "EL CENTRO", el slide de imágenes que hay, queda por encima de mi cabecera en lugar de ocultarse por abajo como el resto del contenido...

Creo que tiene algo que ver con el Z-INDEX, pero he estado probando opciones y no lo he conseguido... No se si tiene una solución fácil o no, pero si alguien me puede echar una mano se lo agradeceré mucho!!

Muchas gracias y un saludo!

[DanielRGB]

Pues tienes que ver bien si el slider tiene z-index.
Si es así tienes que ver que valor tiene. Y ponerlo inferior al z-index del menu.
Recuerda siempre que debes usar position: relative o absolute.

Por ejemplo.

#menu { position: relative; z-index: 10; float: left; }
#slider { position: relative; z-index: 5; float: left; }

[balkyllo]

Gracias Daniel pero sigo en las mismas, hay elementos del slider que tienen un z-index: 1000, yo le pongo a mi cabecera 2000 por ejemplo y sigo en las mismas. He tenido en cuenta lo de que tenga position, pero no consigo que esto quede bien.

El slide llama a una hoja de estilos que es diferente a la de la cabacera, puede tener esto algo que ver?

[willyfc]

Lo que pasa es que no es la barra la que debería tener z-index, es el contendor que tiene a esta, según veo es #arriba, solo ponle a #arriba que tiene position : fixed un z-index: 1001

Código HTML:

#arriba {
    position: fixed;
    width: 100%;
    z-index: 1001;
}
 

[balkyllo]

Mil gracias willyfc!!
perfecto con lo que me dijiste, mira que era obvio, pero me podía haber estado una semana entera y no habría caido que era a #arriba a quien le tenía que dar el z-index.

Gracias por abrirme los ojos!!!jeje

[imanolrubio6]

Yo tengo el mismo problema.
Mi código css es el siguiente:

#slideshow {
margin: 50px auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}

#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}

#slideshow2 {
margin: 50px auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}

#slideshow2 > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}

#slideshow3 {
margin: 50px auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}

#slideshow3 > div {

position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
#hmenu > li {

display:inline-block;
}


#hmenu > li a{
display:block;
padding:10px 5px;
width:90px;
}

li ul {
position: absolute;
display: none;
}

.sub-menu a {

z-index:1002
display: block;
padding: 10px 5px;
width: 130 px;
}

li:hover ul{
display:block;
}

#menu-wrapper, li ul {

background:url(imagenes/fondomenu.jpg) ;

}

#hmenu {
width: 412px;
margin: 0 auto;
}

#hmenu a {
color:#fff; /* Quitar el subrayado */
text-decoration: none;
font-weigth: bold;
}

#hmenu li:hover { /* CSS cuando aparezca el mouse, que aparezca otro fondo de otro color */
;
background: #a3cd39;
text-shadow: 0 0 2px #000; /* CSS3 Sombra en el texto*/
}

Alguna idea?

Muchísimas gracias de antemano