---
title: "Lager hamnar ovanför text"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/118639-lager-hamnar-ovanför-text"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Steady"
published: "2004-12-24T12:14:08.000Z"
updated: "2004-12-25T09:38:10.000Z"
replies: 18
views: 494
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/118639-lager-hamnar-ovanför-text"
---

# Lager hamnar ovanför text

## #1 — Steady, 2004-12-24T12:14Z

Hejsan!

Jag har just gett mig in på lager mha. divvar och har stött på en liten sak som jag inte riktigt får koll på.
Såhär ser CSS:en ut:

```
body {
	height: 100%;
	margin: 0 auto;
	padding: 0;
	background-color: #DDDDDD;
}

#webpage {
	width: 719px;
	height: 100%;
	margin: 0px auto;
	background-image: url(interface/webpage_bg.gif);
	background-repeat: repeat-y;
}

#webpage_top {
	position: absolute;
	width: 676px;
	height: 100px;
	margin: 0 0 0 22px;
	background-image: url(interface/webpage_top.gif);
	background-repeat: no-repeat;
	border-width: 0 0 1px 0;
	border-style: solid;
	border-color: #777777;
}

#webpage_content {
	clear: both;
	margin: 0;
}

#webpage_left {
	float: left;
	width: 21px;
	height: 100%;
	background-image: url(interface/webpage_left.gif);
	background-repeat: repeat-y;
}

#webpage_right {
	float: right;
	width: 21px;
	height: 100%;
	background-image: url(interface/webpage_right.gif);
	background-repeat: repeat-y;
}

#content {
	padding: 20px;
	width: 380px;
	float: left;
}

#sidebar {
	padding: 20px;
	width: 217px;
	float: left;
}
```

Och här har ni HTML-koden

```
<div id="webpage">
<div id="webpage_top"></div>
     <div id="webpage_content">
          <div id="webpage_left"></div>
               <div id="content">Left Content</div>
               <div id="sidebar">Right Sidebar</div>
          <div id="webpage_right"></div>
     </div>
</div>
```

Problemet är nu att texten i content och sidebar lägger sig bakom själva topp-bilden, vilket är ganska självklart, eftersom den har position: absolute... Hur kan man gå runt detta?

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

## #2 — Patrik81, 2004-12-24T12:30Z

Helt otestat, men borde det inte vara så lätt som att lägga in lite olika z-index lite varstans, och ge lagren med text ett högre värde i z-index, än du ger lagret med bakgrunden?

MVH Patrik

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

## #3 — Insider, 2004-12-24T13:20Z

När man använder position:absolute brukar man ange nån kantegenskap t.ex. top:100px.

Men du anger ingen sådan, så om du helt enkelt tar bort position:absolute så hamnar texten i content och sidebar under topp-bilden.

Vad vill du uppnå med position:absolute?

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

## #4 — Steady, 2004-12-24T13:23Z

> **Patrik81 skrev:**
>
> Helt otestat, men borde det inte vara så lätt som att lägga in lite olika z-index lite varstans, och ge lagren med text ett högre värde i z-index, än du ger lagret med bakgrunden?
> 
> MVH Patrik

Har testat det, men det funkar inte. :l

> **Insider skrev:**
>
> När man använder position:absolute brukar man ange nån kantegenskap t.ex. top:100px.
> 
> Men du anger ingen sådan, så om du helt enkelt tar bort position:absolute så hamnar texten i content och sidebar under topp-bilden.
> 
> Vad vill du uppnå med position:absolute?

Det är så att #webpage_left resp. right hamnar under #webpage_top när jag tar bort position: absolute;

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

## #5 — Insider, 2004-12-24T13:26Z

Jaha, så du VILL att texten ska ligga PÅ topp-bilden???

Isåfall kan du väl lägg in topp-bilden som bakgrundsbild i lagret med din text i stället?
Borde bli mycket enklare....

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

## #6 — Steady, 2004-12-24T13:28Z

Nej! ;) Jag vill att texten ska hamna under topp-bilden.
Såhär ser det ut: <http://steady.mine.nu/learnbylisten/>

Om du kollar källkoden så ser du att texten nu ligger under bilden, hur fixar jag så bilden "puttar" ner texten?

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

## #7 — Insider, 2004-12-24T13:34Z

Kommer inte in på din sida. Posta gärna all kod...

Men om du tar bort position:absolute så puttas ju texten ner.

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

## #8 — Steady, 2004-12-24T13:41Z

Here you go!
<http://member.webforum.nu/8332/index.html>

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

## #9 — Insider, 2004-12-24T13:46Z

Som sagt, om du tar bort position:absolute så puttas texten ner.
Eller måste du ha position:absolute av nån annan anledning?

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

## #10 — Steady, 2004-12-24T17:25Z

Jo, men om jag tar bort position: absolute så försvinner ramarna vid sidorna, om du kollar länken som jag gav tidigare så ser du varför jag vill ha position: absolute.

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

## #11 — Insider, 2004-12-24T18:43Z

Hmmm, nu kollade jag på din sida i explorer och märkte att den såg lite annorlunda ut.
Jag tror du får tänka om lite vad gäller designen för att din sida ska se OK ut i flera webbläsare.
Lägg dom där ramarna i en och samma bild som du sätter som bakgrundsbild i #webpage istället. Du får alltså ändra din webpage_bg.gif så att bägge alla ramarna ligger med.

Sen kan du helt enkelt ta bort \<div id="webpage_left"\>\</div\> och \<div id="webpage_right"\>\</div\> ur koden.

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

## #12 — Steady, 2004-12-24T20:57Z

Ska testa, tack så mycket! Och God Jul! :)

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

## #13 — Insider, 2004-12-24T21:08Z

> **Steady skrev:**
>
> Ska testa, tack så mycket! Och God Jul! :)

God Jul!  :D

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

## #14 — Steady, 2004-12-24T21:26Z

Kanonfint, precis så jag ville ha det, tack så mycket Insider! :)

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

## #15 — Insider, 2004-12-24T21:40Z

Fint.  :bire

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

## #16 — Steady, 2004-12-24T22:11Z

En liten fråga till bara, som jag har det nu så visas bakgrunden endast i IE och inte i FF.
Skärmdump IE: <http://member.webforum.nu/8332/skarmdump_wf_ie.gif>
Skärmdump FF: <http://member.webforum.nu/8332/skarmdump_wf_ff.gif>
Vad kan detta bero på? Såhär ser koden ut: 

```
body {
	height: 100%;
	margin: 0 auto;
	padding: 0;
	background-color: #DDDDDD;
}

div {
	font-family: verdana, tahoma, arial, sans-serif;
	font-size: 11px;
}

#webpage {
	width: 740px;
	height: 100%;
	margin: 0px auto;
	background-image: url(interface/webpage_bg.gif);
	background-repeat: repeat-y;
}

#webpage_top {
	width: 698px;
	height: 100px;
	margin: 0 0 0 21px;
	background-image: url(interface/webpage_top.gif);
	background-repeat: no-repeat;
	border-width: 0 0 1px 0;
	border-style: solid;
	border-color: #777777;
}

#webpage_content {
	margin: 0 0 0 20px;
}

#content {
	padding: 20px;
	width: 420px;
	float: left;
}

#sidebar {
	padding: 20px;
	width: 217px;
	float: left;
}
```

Och

```
<div id="webpage">
<div id="webpage_top"></div>
	<div id="webpage_content">
		<div id="content">

		Main

		</div>
		<div id="sidebar">

		Right

		</div>
	</div>
</div>
```

Tack på förhand!

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

## #17 — Insider, 2004-12-25T00:05Z

Ett blockelement som bara innehåller flytande element trycks ej ned automatiskt, eftersom flytande element inte ligger med i dokumentflödet på samma sätt.  En liknande effekt som du fick med position:absolute förut.

Lägg in ett nytt blockelement längst ned så borde det funka. En sidfot kanske?

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

## #18 — Insider, 2004-12-25T00:06Z

Två bra artiklar som beskriver mer om positionering och floats som är jätteviktigt att ha koll på som du har sett idag.  ;)

[Flytande formgivning](http://www.autisticcuckoo.net/arkiv.php?id=2004/12/10/flytande)

[Relativt absolut](http://www.autisticcuckoo.net/arkiv.php?id=2004/12/07/relativt-absolut)

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

## #19 — Steady, 2004-12-25T09:38Z

Tack än en gång, det löste mitt problem!

wF är ju kanon! ;)

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/118639-lager-hamnar-ovanför-text