Superponer capas

_Richi_ · #1 (**permalink**) 30/12/2009, 06:06

Hola a todos.
Quiero colocar varias capas en un <td>. Para que esas capas se muevan cuando se mueva la tabla debo establecerlas con position:relative.
Mi problema es que al alternar con javascript la visibilidad de las capas no aparecen en el mismo sitio sino que aparece una debajo de la otra.
No sé si me he explicado bien, dejo un código de ejemplo con el problema.
Gracias de antemano y un saludo.

Código HTML:

Ver original<html>
    <head>
        <title>
            P&aacute;gina con dos capas.
        </title>
        <script type="text/javascript" language="javascript">
            function noOcultar(nombreCapa){
                var capa=document.getElementById(nombreCapa);
                capa.style.visibility="visible";
                var capas=document.getElementsByTagName("div");
                for(var i=0;i<capas.length;i++){
                    if(capas[i].id!=nombreCapa){
                        capas[i].style.visibility="hidden";
                    }
                }   
            }
        </script>
    </head>
    <!-- Poner dos capas dentro de un td e intentar que se vean en el mismo sitio
    cuando se alterna la visibilidad de las dos -->
    <body>
        <center>
        <br><br>
        <button type="button" onclick="noOcultar('capa2');">Ver capa amarilla</button>
        &nbsp;&nbsp;
        <button type="button" onclick="noOcultar('capa1');">Ver capa azul</button>
        <br><br>
        <table border="1">
            <tr>
                <td width="250px" height="250px">&nbsp;</td>
                <td width="250px" height="250px">&nbsp;</td>
            </tr>
            <tr>
                <td width="250px" height="250px" align="center">
                    <div id="capa1" style="background-color:blue;position:relative;
                    left:10px;top:10px;width:200px;height:200px;visibility:visible;border:solid"/>
                    </div>
                    <div id="capa2" style="background-color:yellow;position:relative;
                    left:10px;top:10px;width:200px;height:200px;visibility:hidden;border:solid"/>
                    </div>
                </td>
                <td width="250px" height="250px">&nbsp;</td>
            </tr>
        </table>
        </center>
    </body>
</html>

hades87 · #2 (**permalink**) 30/12/2009, 06:43

en vez del atributo visibility prueba con el dosplay.

http://css.hazunaweb.com/215.php

_Richi_ · #3 (**permalink**) 30/12/2009, 13:14

Gracias hades.

Solucionado cambiando visibility por display.

Un saludo

hades87 · #4 (**permalink**) 30/12/2009, 13:21

De nada, me alegro que te haya servido.

Ten en cuenta que con visibility se oculta pero sigue ocupando espacio, don display se oculta y no ocupa espacio.