Parece que con ese javascript tampoco me funciona, lo del z-index ya lo estaba haciendo pero tampoco.
Voy a poner también el CSS completo que uso para ver si se ve mejor el fallo. Lo primero el HTML es tal que así:
Código PHP:
<div id="content">
<form id="cambiar_mes">
<select>
<option value="1">enero</option>
<option value="2">febrero</option>
....
<option value="12">diciembre</option>
</select>
</form>
<div id="overlay">
<div id="popup">
<p>bla bla bla bla</p>
</div> <!-- fin popup-->
</div> <!-- fin overlay -->
</div> <!-- fin content -->
Y aqui el CSS asociado a cada cosa...
Código PHP:
div#content {
float:left;
width:650px;
}
#overlay {
background-image: url("img/bg50.gif");
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
text-align:center;
z-index: 9000;
}
#popup{
background-color: #fff;
border: 2px groove #000;
font-size:0.7em;
margin: 80px 33em;
padding: 15px;
width:33em;
z-index:9001;
visibility: hidden;
}
Bueno, la visibility luego se cambia a visible mediante javascript, así que no le hagan caso.
NOTA: Como solución provisional he desplazado la capa popup un poco a la derecha, y así no se nota tanto el solapamiento. Pero ya por curiosidad...