Div sovrapposti senza usare positio:absolute

[99caos]

Ho scritto un javascript che al passaggio del mouse sopra dei link cambia la visibilità di alcuni div.

Tutto funziona egregiamente.

Solo che i div si posizionano l'uno sotto l'altro seguendo il flusso ordinario del documento.
Io vorrei che fossero uno sopra l'altro in modo che quando uno scompare l'altro compare al suo posto.

Questo riesco ad ottenerlo utilizzando position: absolute e impostando top: 0px;

Solo che ovviamente mi posiziona i div in cima al documento.

Dato che non posso calcolare l'altezza esatta dei div in quanto gia differisce di molto da FireFox ad Explorer, devo trovare un'altra strada.

Come fare?

[99caos]

Html:

<div id="thumbDesc">
	<div id="layer1" >

Cosa cerchi?</p></div>
	<div id="layer2" >

Quadri</p></div>
	<div id="layer3" >

Ceramiche</p></div>
	<div id="layer4" >

Vuoi contattarmi?</p></div>
</div>

CSS:

#thumbDesc {
	width: 333px;
	border: 1px solid #666;
	height:80px;
	padding: 0;
	margin: 10px 0 0 0;
	overflow: hidden;
}
#thumbDesc p{
	padding: 0 25px 0 25px;
}
#layer1, #layer2, #layer3, #layer4 {
	position: relative;
	top:0px;
	visibility: hidden;
}
#layer1 {
	visibility:visible;
 }

Lo script JS cambia il valore visibility dei layer impostando quello selezionato dal passaggio del mouse come visible e gli altri hidden.

Lo script funziona ma non riesco a posizionare relativamente i div in modo che le scritte appaiano allo stesso posto.

[andrea.paiola]

al posto di hidden (che mantiene lo spazio occupato) usa display:none

[99caos]

Perfetto, grazie