Solapar capas ina encima de otra siendo relavitas a una tabla ...en lugar de a la pan

[Jaime18]

Hola ... me ha surgido un problema que espero que me podais solucionar ...

Tengo hecha una capa .. que con un script se hace visible o invisible mediante la pulsacion de un boton .... ahora bien ....

Ahora tengo otro boton ... y kiero k al presionarlo ... se aga visible una capa que este por encima de la anterior que contenga unformulario ...

El porblema esk para que se ajusten las capas a un fondo esta definida como RELATIVA a la celda de la tabla que contiene el fondo ... y quiero hacer que la capa nueva este encima de la anterior pero que tambien sera relativa al fondo . . en lugar de a ala pantalla ..para luego no tener problemas con las resoluciones ...

Alguien me puede ayudar ...

Si no me explico bien ...decidlo y intento que quede mas claro ... gracias ...

[quimfv]

Algo así serviria?

Código HTML:

<table width="75%" border="1" cellspacing="0" cellpadding="0">
  <tr> 
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr> 
    <td>&nbsp;</td>
    <td valign="top"><div style="position:relative;width:100%"> 
        <div style="position:absolute; width:100%" id="c1"> 
          <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr> 
              <td bgcolor="#FF0000">Capa 1</td>
            </tr>
          </table>
        </div>
        <div style="position:absolute;width:100%;bgcolor:#00ff0" id="c2">
          <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr> 
              <td bgcolor="#00FF00">Capa 2</td>
            </tr>
          </table>
        </div>
      </div></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr> 
    <td>&nbsp;</td>
    <td><input name="Capa1" type="button" id="Capa1" value="Capa 1" onClick="document.getElementById('c1').style.display='block';document.getElementById('c2').style.display='none'"> 
      <input name="Capa2" type="button" id="Capa2" value="Capa 2" onClick="document.getElementById('c2').style.display='block';document.getElementById('c1').style.display='none'"></td>
    <td>&nbsp;</td>
  </tr>
</table> 

Dime si te sirve!!

Quim

[Jaime18]

Sii !! como lo has echo ?

[quimfv]

No he acabado nunca de entender como va lo de position:relative o absolute.

Yo entendia que si era relativa tendria que ajustarse al contenedor (una celda, por ejemplo) pero no funcionaba????

Un dia se me ocurrio anidar tres capas, una con position:relative que actua como contenedor de las otras dos la quales tienen position:absolute y funciono.... bueno ademas hay que alinear el contenido de la celda a top

Código HTML:

<td valign="top">
      <div style="position:relative;width:100%"> 
        <div style="position:absolute; width:100%" id="c1">Contenido 1</div>
        <div style="position:absolute;width:100%;bgcolor:#00ff0" id="c2">Contenido 2</div>
      </div>
</td> 

No se si funciona siempre.

Supongo que mirar más atentamente los manuales y trabajar menos con el prueba y error no facilitaria las cosas.... Seguro que esta explicado en alguna parte pero no la he encontrado.

Quim