Lager ovanpå, relativ position

Hej där, har sökt runt efter hur jag kan placera två lager ovanpå varandra utan att använda position:absolute.

Två lager med position: relative kommer efter varandra.

Anledningen att jag vill ha relative är att lagren ligger i en tabellcell som hamnar någonstanns på skärmen som jag inte har en pixel-koordinat för.

Nuvarande kod:

...
<td>
<DIV id="xTop" style="position:relative; left:0px; top:0px; width:128; height:275; z-index:2; border: 0 px; overflow:visible; visibility:visible; filter: Alpha(opacity=75);">
Text som skall ligga ovanpå</DIV>
<DIV id="xUnder" style="position:relative; left:0px; top:0px; z-index:1; border: 0px; overflow:visible; visibility:visible;">
<img src="bild.jpg">
</DIV>
</td>
...

(det räcker inte att sätta bilden som background i tabellcellen)

Säkert finns en enkel (?) fråga som denna besvarad redan, men jag hittar det inte med sökningar på "lager ovanpå" och liknande.

Go'helg på Er! :h
Erik L.

Tråden flyttas till html/css så får vi se om du får några tips.

Hela poängen med att använda position:relative är att dom inte ska hamna ovanpå varandra utan "flyta" med resten av innehållet på sidan - så jag tror inte att det går. :(

Hmm...

Man kan ju positionera relativt något med både positiva och negativa koordinater...

Och i det här fallet vet man ju hur högt det "övre" blocket ("lagret") är - och provar man med en relativ positionering på top:-275px så funkar det faktiskt...

Fast efteråt upptäcker man snabbt att <td>-taggen blir lite högre än man kanske tänkt (den anser tydligen att bägge blocken skall få plats under varandra, trots ompositioneringen) - så det får man t.ex. lösa genom att lägga en <div style="overflow:hidden; height:275px"> runt de två lagren...

Äsch - enklare att visa i kod:
Såhär skulle det kunna se ut:

<td>
<div style="overflow:hidden; height:275px; width:128px">
  <div id="xTop" style="position:relative; left:0; top:0; width:128px; height:275px; z-index:2;">
    Text som skall ligga ovanpå
  </div>
  <div id="xUnder" style="position:relative; left:0; top:-275px; width:128px; height:275px; z-index:1;">
    <img src="testbild.gif" style="width:128px; height:275px">
  </div> 
</div>
</td>

Prova:
http://member.webforum.nu/2241/relativa_lager_ovanpa_varandra.html

PS:
När man lägger höjder och bredder måste man vara noga med att alltid ange enhet också på alla värden som är skiljda från noll (px i detta fall) för att det garanterat skall fungera ;)

Förresten: Välkommen till wF ErikLtz!