---
title: "Lager byter plats"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/150035-lager-byter-plats"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Inferis"
published: "2006-08-13T18:06:07.000Z"
updated: "2006-08-14T00:15:34.000Z"
replies: 10
views: 444
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/150035-lager-byter-plats"
---

# Lager byter plats

## #1 — Inferis, 2006-08-13T18:06Z

Jag har två lager där ena bilden ska ligga över den andra. 
Men lägger jag till overflow: hidden så byter lagren plats.
Hur löser man detta?

```
#bild {
	width: 250px;
	height: 180px;
	MARGIN: -210px 0px 0px 43px;
	float: left;
	z-index: 3;
	overflow: hidden;
}
#bild2 {
	width: 296px;
	height: 270px;
	float: left;
	MARGIN: -270px 0px 0px 10px;
	z-index: 4;
}
```

 

\<DIV id="bild"\>\<IMG SRC="grafik/bild.jpg" alt=""\>\</DIV\> 
\<DIV id="bild2"\>\<IMG SRC="grafik/bild_ram.gif" alt=""\>\</DIV\>

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

## #2 — Inferis, 2006-08-13T18:07Z

Glömde säga att i IE7 så ser det ut det ska medans FF vänder på lagren.

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

## #3 — zcorpan, 2006-08-13T18:47Z

z-index gäller bara för positionerade element.

Vad är det du försöker göra? Lägga till en ram runt en bild?

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

## #4 — Inferis, 2006-08-13T18:54Z

Ja, jag vill ha en ram över en bild. Är den undre bilden för stor så det överflödiga gömmas med overflow: hidden var tanken.
Hjälpte inte att ta bort z-index heller.

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

## #5 — zcorpan, 2006-08-13T19:11Z

Ramen är "dekoration" och bör därför läggas dit med CSS istället för att använda HTML \<img\>. Eftersom IE saknar stöd för egenskapen 'content' kan vi använda en bakgrundsbild istället:

```
<p class="framed"><span></span><img alt="" src="bild.png"></p>
```

```
.framed { position:relative; float:left; overflow:hidden; }
 .framed span { position:absolute; width:100%; height:100%; background-image:url(ram.png); }
 .framed img { display:block; margin:20px; }
```

Nåt i den stilen...

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

## #6 — Inferis, 2006-08-13T19:29Z

Tack! nu fick jag ihop det. 
Men ett problem återstår... Hur fixar jag overflow: hidden?

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

## #7 — Inferis, 2006-08-13T19:54Z

Detta funkar inte:

```
 .framed img { margin:20px; height: 180; width: 250; overflow: hidden; }
```

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

## #8 — zcorpan, 2006-08-13T20:24Z

Ange en bredd på .framed så borde det funka.

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

## #9 — Inferis, 2006-08-13T21:08Z

Jag får inte till det... :-(

bild_ram.gif har fasta mått H:270 W:300 och har ett hål som är 250x180 där bild.jpg ska synas. Bild.jpg kommer att bli olika bilder med olika mått.

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

## #10 — zcorpan, 2006-08-13T22:43Z

```
.framed { position:relative; float:left; overflow:hidden; [b]width:300px; height:270px;[/b] }
 .framed span { position:absolute; [b]left:0; /* ie6... */[/b] width:100%; height:100%; background-image:url([b]bild_ram.gif[/b]); }
 .framed img { display:block; [b]margin-top:45px; /* (270-180)/2 */ margin-left:25px; /* (300-250)/2[/b] */ }
```

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

## #11 — Inferis, 2006-08-14T00:15Z

Tack för hjälpen! Måste dock be om ursäkt, hade råkat byta namn på bild_ram.gif... :-(

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/150035-lager-byter-plats