Problemática con el orden de las capas

[Neeno]

Me pasa esto:

El orden de las capas es el siguiente:

Código PHP:

  <div id="content"> 
    <form id=""></form> 
    <div id="popup"></div> 
</div> <!-- content-->  
   

Y lo que pretendo es que la capa popup se vea encima de todo lo demás.
En firefox ya se ve correctamente, pero me pasa ese problema con esos <select>

¿Como podría hacerlo?

[PatomaS]

Hola

Asígnales un z-index a cada una y el valor más alto a la que quieras que esté encima.

Felicidad

[JavierB]

Hola a los dos.

Este enlace puede servir de ayuda:

http://www.aplus.co.yu/wch/intro/

Saludos,

[Neeno]

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...