webForumDet fria alternativet

Bild åvanför bild utan absolut possitionering

HTML & CSSur HTML, XHTML & CSS

5 svar · 326 visningar · startad av rincewind

rincewindMedlem sedan nov. 2003104 inlägg
#1

Hej,

Jag undrar om jag kan placera en bild åvanför en annan på en hemsida utan att använda position:absolute;...

Kort sagt, jag vill, i ett elemet (en div) som kan ligga lite vart som helst på sidan, lägga in två bilder som överlappar varandra.
(Detta ska sedan koplas till ett javascript som fadar bilderna imellan varandra..)

Och om det går, hur gör man detta då?
Mvh
-- Rincewind

frankofMedlem sedan jan. 20016 874 inlägg
#2

använd positon:relative och olika z-index (om jag har fattat frågan rätt)

rincewindMedlem sedan nov. 2003104 inlägg
#3

Om jag som följande:

	<div id='ll0' style='positon:relative;  left:0; top:0; filter:alpha(opacity=100); -moz-opacity:100; z-index:0;'>
		<img src='img/bild1.jpg' name='image0'>
	</div>
        <div id='ll1' style='positon:relative;  left:0; top:0;  border:1px solid black; filter:alpha(opacity=0); -moz-opacity:0; z-index:1;'>
        	<img position:absolute;  src='img/bild2.jpg' name='image1'>
	</div>

Så lägger sig bilderna under varandra.. Så det verkar inte fungera? Vill att bilderna ska överlappa varandra...=) Dvs det ska se ut som en bild....?
Eller gör jag någe fel?

dectgapMedlem sedan sep. 20021 655 inlägg
#4

Jag tror att rincewind har missuppfattat absolut-positionering lite, men i så fall är du absolut (roligt va? :) ) inte ensam.

Bara för att något är absolutpositionerat måste man inte positionera det med x- och y-koordinater utifrån sidan eller något annat relativt positionerat element.
Att absolutpositionera ett element betyder egentligen bara att man tar ut det från det normala sidflödet. Om man inte anger några vidare instruktioner om var det ska placeras kommer det att placeras på samma ställe som om det inte vore absolutpositionerat. Skillnaden blir bara att efterföljande element låtsas om att det absolutpositionerade elementet inte finns.

Om man skriver

<p><img src="bild1.png" style="position: absolute" /><img src="bild2.png" /></p>

så kommer bild1.png att ligga ovanpå bild2.png, oavsett var i dokumentet vi placerar p-elementet.

rincewindMedlem sedan nov. 2003104 inlägg
#5

Nej lite kewlt..
Visste jag inte.. Tackar som bara den: dectgap..

Mmm.. Ser bra ut i Explorer men inte Mozilla.. Ovanligt...=)
Provar vidare=)

zcorpanMedlem sedan dec. 20042 245 inlägg
#6

Mmm.. Ser bra ut i Explorer men inte Mozilla.. Ovanligt...=)

Ja, det brukar vara tvärt om för mig... :)

130 ms totalt · 3 externa anrop · v20260731065814-full.29ac60f6
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
127 ms — hämta tråd, inlägg och bilagor (db)