HTML - duda sobre divs

Saludos, les planteo un problema que me ha surgido tras estar desarrollando una pagina web, tras indagar como sobreponer capaz encontre lo siguiente, lo cual funciona bien

- Tengo la siguiente parte de una tabla:

<tr>
<td height="2" colspan="3">
<div class="style6" id="Layer1" style="visibility:visible">Texto capa 1</div>
<div class="style6" id="Layer2" style="visibility:visible">Texto capa 2</div>
<div class="style6" id="Layer3" style="visibility:visible">Texto capa 3</div>
</tr>

- Ahora para sobreponer los divs defini en un css, lo siguiente

#Layer1 { position:relative;
width:700px; height:20px;
left: 25px; top: 0px;
z-index:1; text-align: center; }
#Layer2 { position:relative;
width:700px; height:20px;
left: 25px; top: -20px;
z-index:2; text-align: center; }
#Layer3 { position:relative;
width:700px; height:20px;
left: 25px; top: -40px;
z-index:3; text-align: center; }

- hasta aqui se sobreponen las capas, y sin importar si cambio la resolcion conservan su posicion,

- el problema que tengo es que cuando visualizo mi pagina en un navegador, aunque los divs se sobreponen uno tras otro, estos ocupan espacio, es decir, la fila de la tabla donde los tengo en vez de ocupar el tamaño de un solo renglon (ya sea Texto capa 1, Texto capa 2 o Texto capa 3) ocupa el tamaño de los 3 textos aunque esten sobre puestos uno tras otro.

intente cambiar el tamaño alto de mi fila de forma que solamente ocupe la altura de una linea, pero aunque lo cambie, este sigue ocupando el espacio de los 3 divs, he aqui que recurro al foro para ver si alguien me puede ayudar