Foros del web, para los que viven de bits

Neeno · 19-sep-2007, 16:59

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 · 19-sep-2007, 21:27

Hola

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

Felicidad

JavierB · 20-sep-2007, 00:46

Hola a los dos.

Este enlace puede servir de ayuda:

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

Saludos,

Neeno · 20-sep-2007, 05:32

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&#37;;
    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...

19-sep-2007, 16:59	#1 (permalink)
Neeno Fecha de Ingreso: abril-2007 Mensajes: 22	Problemática con el orden de las capas 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?

19-sep-2007, 21:27	#2 (permalink)
PatomaS Colaborador Fecha de Ingreso: marzo-2004 Ubicación: En alguna otra parte Mensajes: 4.392	Re: Problemática con el orden de las capas Hola Asígnales un z-index a cada una y el valor más alto a la que quieras que esté encima. Felicidad __________________ De vuelta por aquí, más o menos ¡ hey, hou, hou, hey !

20-sep-2007, 00:46	#3 (permalink)
JavierB Moderata Fecha de Ingreso: noviembre-2002 Ubicación: Madrid Mensajes: 19.552	Re: Problemática con el orden de las capas Hola a los dos. Este enlace puede servir de ayuda: http://www.aplus.co.yu/wch/intro/ Saludos, __________________ Lee las Políticas de los foros y escribe correctamente.

20-sep-2007, 05:32	#4 (permalink)
Neeno Fecha de Ingreso: abril-2007 Mensajes: 22	Re: Problemática con el orden de las capas 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... Última edición por Neeno; 20-sep-2007 a las 05:39.

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado