Lager ovanpå, relativ position

3 svar · 729 visningar · startad av ErikLtz 3 okt. 2003

ErikLtzMedlem sedan okt. 20031 inlägg

Trådstart3 okt. 2003 16:06#1

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!
Erik L.

JojoxxMedlem sedan juni 20004 308 inlägg

3 okt. 2003 19:31#2

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

Web-TorMedlem sedan nov. 200013 890 inlägg

4 okt. 2003 09:02#3

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.

jarvkloMedlem sedan juli 20013 378 inlägg

4 okt. 2003 10:38#4

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!