Hola, tengo unas cuantas imágenes de fondo que quiero que encajen y para eso necesitos que unas se superpongan a las otras.
Código:
#left{
width: 52px;
height: 681px;
display: block;
float: left;
background: url(../img/left.jpg) no-repeat;
z-index:18;
margin-right: -52px;
position: relative;
}
#right{
width: 49px;
height: 681px;
display: block;
float: right;
background: url(../img/right.jpg) no-repeat;
z-index: 12;
margin-left:-49px;
position: relative;
}
#menu{
width:761px;
height: 163px;
background: #ffffff url(../img/menu_bkg.jpg) no-repeat top left;
display: block;
padding: 20px;
z-index:20;
position: relative;
}
El problema está en esos tres divs,
left y
right funcionan perfectamente, están por encima de otras capas pero el
menu no hay manera que se posicione encima de ellos dos. En teoria el hecho de que ese div (menu) aparezca más tarde en el HTML no debería influir, no?
"Position: absolute" tampoco es una solución. Con relative z-index funciona perfectamente y esto tampoco me funciona con absolute.
No es un problema de navegador, no se ve bien en ninguno.
¿Alguien ve el problema?