---
title: "Bilder ovanpå varandra med relative + z-index"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/166593-bilder-ovanpå-varandra-med-relative-z-index"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "leniz"
published: "2007-11-22T10:05:24.000Z"
updated: "2007-11-22T16:57:44.000Z"
replies: 11
views: 831
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/166593-bilder-ovanpå-varandra-med-relative-z-index"
---

# Bilder ovanpå varandra med relative + z-index

## #1 — leniz, 2007-11-22T10:05Z

Hej!

Försöker få 2 bilder att placeras på varandra med z-index. När jag använder position:absolute fungerar det men inte om jag använder position:relative. Hur kan det komma sig? När jag använder position:relative placeras ena bilden ovanför den andra och inte ovanpå.

Vore enklare för mig om jag på något vis kunde få bildernas placering att utgå från den tabell cell de ligger i, istället för sidans hörn.

```
<STYLE TYPE="text/css"> 
<!-- 
div.layer0{
    position:absolute;
	top:0px;
	left:0px;
    z-index:0
}
div.layer1{
    position:absolute;
	visibility:hidden;	
	top:0px;
	left:54px;
    z-index:1
}
--> 
</STYLE> 

<table width="148" height="350" cellpadding="0" cellspacing="0">
    <tr>
         <td>
         <div class="layer0" id="test"><img src="design/bild1.gif"></div>
         <div class="layer1" id="test1"><img src="design/bild2.gif"></div>
         </td>
    </tr>
</table>
```

Permalänk: https://www.webforum.nu/p/166593

## #2 — voigtann1, 2007-11-22T10:09Z

du kan göra:

```
<div style="position:relative;">
  <div class="layer0" style="position:absolute;top:0;left:0;">bild1</div>
  <div class="layer1" style="position:absolute;top:0;left:0;">bild2</div>
</div>
```

???

Relative är ju "relevant" var orginal positionen är.

Permalänk: https://www.webforum.nu/p/2053137

## #3 — Danne V, 2007-11-22T10:12Z

Du kan inte placera divvar på varandra utan att ange absoluta positioneringar vilket ju är logiskt om du tänker efter.

Om du har problem, så stoppa in båda divvarna i en omslutande div som du ger relativ positionering. Då funkar de båda bld-divvarnas absoluta position i relation till den omslutande, relativt positionerade divven, som i sin tur kan ligga och "flyta med" layouten som viket annat element som helst.

red: som viogtann hann posta medan jag skrev.... :)

Permalänk: https://www.webforum.nu/p/2053138

## #4 — leniz, 2007-11-22T10:41Z

Kalas!!! Stort tack till er båda :-)

Permalänk: https://www.webforum.nu/p/2053146

## #5 — leniz, 2007-11-22T13:42Z

Hej!
Skulle lägga in ett tredje lager nu men då fungerar inte onmouseover på den. Är det bara möjligt att lägga in 2 lager?
Mvh Lena

Permalänk: https://www.webforum.nu/p/2053183

## #6 — voigtann1, 2007-11-22T13:52Z

placera onmouseover längst ner i din kod:

```
<div style="position:relative;">
  <div class="layer0" style="position:absolute;top:0;left:0;">bild1</div>
  <div class="layer1" style="position:absolute;top:0;left:0;">bild2</div>
  <div class="layer1" style="position:absolute;top:0;left:0;">Denna har mouse over</div>
</div>
```

eller menar du att det ska vara "två" mouse over ? på två knappar?

Permalänk: https://www.webforum.nu/p/2053184

## #7 — leniz, 2007-11-22T14:00Z

Hej!

Om det ser ut så här:
\<div style="position:relative;"\>
\<img src="bilden.jpg"\>
  \<div class="layer0" style="position:absolute;top:0;left:0;"\>bild1\</div\>
  \<div class="layer1" style="position:absolute;top:0;left:0;"\>bild2\</div\>
  \<div class="layer2" style="position:absolute;top:0;left:0;"\>Denna har mouse over\</div\>
\</div\>

så visas bara layer 0 och layer 1, inte layer 2 vid mouseover.

Om jag däremot lägger bilden utanför första diven fungerar alla, men då visas mouseover bilden inte över den andra bilden som jag vill, utan istället under.
Förstår du vad jag menar?
Mvh Lena

Permalänk: https://www.webforum.nu/p/2053187

## #8 — voigtann1, 2007-11-22T14:04Z

visa din exakta kod så får man testa lite :) css,js + html.. gärna om möjligt = någon bild med :)

Permalänk: https://www.webforum.nu/p/2053189

## #9 — leniz, 2007-11-22T14:19Z

Hej!

Bifogar filen som den ser ut nu, om du vill kan jag maila eller skicka bilderna per icq (8279609)?

js filen vet jag inte om jag får länka in här då den kommer från Jojoxx.
 
Mvh Lena

Permalänk: https://www.webforum.nu/p/2053196

## #10 — leniz, 2007-11-22T14:21Z

Filen...

kom visst inte med?

Kopierar in all kod istället då   :) 

```
<html>
<head>
<SCRIPT LANGUAGE="javascript" SRC="layerlib.js"></script>
</head>
<body>

<table width="500">
	<tr>
		<td width="200" valign="top">
		xxx
		</td>
		<td width="148" valign="top">
		<table cellpadding="0" cellspacing="0">
			<tr>
				<td valign="top">
				<div style="position:relative;top:0;left:0;">
				<img src="design/karta.gif" border="0" width="148" height="350" usemap="#karta">
				<div id="lan1" style="position:absolute;top:0;left:54;visibility:hidden;"><img src="design/norrbotten.gif" usemap="#karta" border="0" onmouseover="showLayer('lan1');" onmouseout="hideLayer('lan1');"></div>
				<div id="lan2" style="position:absolute;top:72;left:42;visibility:hidden;"><img src="design/vasterbotten.gif" usemap="#karta" border="0" onmouseover="showLayer('lan2');" onmouseout="hideLayer('lan2');"></div>
				<div id="lan3" style="position:absolute;top:103;left:18;visibility:hidden;"><img src="design/jamtland.gif" usemap="#karta" border="0" onmouseover="showLayer('lan3');" onmouseout="hideLayer('lan3');"></div>
				<map name="karta">
				<area shape="poly" coords="106,0,128,14,134,24,144,55,147,79,122,99,116,100,111,96,105,96,100,101,94,97,86,91,81,91,72,80,58,74,58,62,72,29,100,0" alt="Norrbottens län" href="resultat.asp?lan_id=23" onmouseover="showLayer('lan1');" onmouseout="hideLayer('lan1');">  
				<area shape="poly" coords="57,73,71,80,80,90,84,90,92,94,98,100,101,100,104,95,109,96,114,99,121,100,123,117,107,142,101,143,90,131,72,131,67,126,64,125,60,119,57,117,52,110,44,103,50,76" alt="Västerbottens län" href="resultat.asp?lan_id=23" onmouseover="showLayer('lan2');" onmouseout="hideLayer('lan2');">  
				<area shape="poly" coords="44,103,51,109,55,114,57,118,61,120,63,124,67,126,71,130,71,138,62,139,62,143,65,147,73,156,73,158,69,164,61,164,58,166,49,166,51,173,56,174,56,179,53,183,52,186,45,188,44,190,34,198,32,186,31,181,27,180,23,176,16,175,18,129" alt="Jämtlands län" href="resultat.asp?lan_id=23" onmouseover="showLayer('lan3');" onmouseout="hideLayer('lan3');">  
				</map>
				</div>
				</td>
			</tr>
		</table>
		</td>
		<td valign="top">
		<a href="default.asp" onmouseover="showLayer('lan1');" onmouseout="hideLayer('lan1');">Norrbottens län</a><br>
		<a href="default.asp" onmouseover="showLayer('lan2');" onmouseout="hideLayer('lan2');">Västerbottens län</a>
		<a href="default.asp" onmouseover="showLayer('lan3');" onmouseout="hideLayer('lan3');">Jämtlands län</a>
		</td>
	</tr>
</table>
</body>
</html>
```

Permalänk: https://www.webforum.nu/p/2053199

## #11 — Danne V, 2007-11-22T16:16Z

> **leniz skrev:**
>
> kom visst inte med?
> 
> Kopierar in all kod istället då   :)

javascripten och bilderna kommer inte med....

Det allra bästa är att göra iordning sidan precis som den ska vara i skarpt läge (inkl. bilder, css, skripter osv), ladda upp den till en server och ge en länk. Då kan folk snabbt och enkelt se hur det ser ut och funkar i olika webbläsare osv. Dessutom eliminerar det risken att du själv kanske har tagit bort kod som du tror är irrelevant till problemet, men som folk måste se.

Måste folk som vill hjälpa själva börja kopiera in kod i ett dokument, samma med CSS och eventuella andra skripter, kanske t.o.m. göra några låtsas-bilder för att få en uppfattning om hur sidan ser ut - och dessutom ladda upp till egen server för att kunna se - då är det inte många som orkar hjälpa.

Alltså: Kan du göra ordning sidan och visa? Om du har besvärande texter/bilder, byt mot lorem ipsum och bilder på familjens katt.

Permalänk: https://www.webforum.nu/p/2053221

## #12 — voigtann1, 2007-11-22T16:57Z

Jag har kontakt med leniz över ICQ.. vi fixar ;)

Permalänk: https://www.webforum.nu/p/2053224

---

Tråden på webben: https://www.webforum.nu/amne/html-css/166593-bilder-ovanpå-varandra-med-relative-z-index