---
title: "div ovanpå div i absolut position"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/122135-div-ovanpå-div-i-absolut-position"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "ironhead"
published: "2005-02-09T23:12:11.000Z"
updated: "2005-02-10T20:53:17.000Z"
replies: 8
views: 433
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/122135-div-ovanpå-div-i-absolut-position"
---

# div ovanpå div i absolut position

## #1 — ironhead, 2005-02-09T23:12Z

Hej!

Jag försöker grejja med en enkel wysiwyg editor som jag har i en \<div\>, nu skulle jag vilja lägga en \<div\> till ovanpå den första och positionera den exakt där jag vill...alltså få min div med iframe som innehåller färgpaletten att alltid visas under färg-knappen när jag trycker på den...som det är nu så flyttas den med när man gör radmatning i div-en :-/

```
<div id=foo contenteditable=true align=left style="width:754px;
 font-face:Verdana; padding:3; border:1px solid #CCCCCC; 
 scrollbar-base-color:gray; overflow=auto;z-index:100;">
</div>
  
<div id="palette" contenteditable=false style="z-index:120; 
 display: none; position:absolute; float:none; margin-left:368px; 
 margin-top: 0px;">
   <iframe width="154" height="104" id="cp1" src="palette.htm" 
 marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div>
```

Hur tusan ska man skriva, har testat allt från static till relative, z-index etc. men får inte till det...

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

## #2 — Fuel, 2005-02-10T11:04Z

Tja.. satt & lekte lite som snabbast :)

```php
<script type="text/javascript">
function show_palz(palette_id) {
    document.getElementById(palette_id).className = "palette1b";
}
</script>

<style type="text/css">
.hideme { display: none; }

.palette1b { display: block; position:absolute; left:10px; top: 40px; }
.editme   { display: block; margin-top: 140px; font-face:verdana; font-size:12px; }
.editwin  { width:500px; height:300px; padding:3; border:1px solid #CCCCCC; scrollbar-base-color:gray; overflow:auto; }
</style>
<button onclick="javascript:show_palz('palette');">Palette 1</button>

<div id="stuff" contenteditable="true" class="editme">
Edit here:
<div id="foo" contenteditable="true" class="editwin">
Some text here..
</div>
</div>

<div id="palette" class="hideme">
<iframe width="154" height="104" id="cp1" src="palette.htm" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div>
```

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

## #3 — ironhead, 2005-02-10T11:09Z

okej, kanske inte helt kristallklart :-/

1\. jag har en knapp (input type="button") ovanför min editerbara div
2\. div foo är editeringsdiven, dvs jag kan skriva text i den
3\. jag har ett lager till som jag kallar "palette" som innehåller en iframe som i sin tur innehåller palette.htm och är en klickabar färgskala.
4\. jag vill lägga lagret "palette" strax under knappen, och det betyder att jag kommer att lägga lagret ovanpå lagret "foo"
5\. Går bra sålänge jag inte skrivit nåt i lagret "foo", men när jag skriver så förflyttas lagret "palette" nedåt.

Hur ska jag göra så att lagret "palette" ligger i en fast position under knappen?

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

## #4 — ironhead, 2005-02-10T11:14Z

> **Fuel skrev:**
>
> Tja.. satt & lekte lite som snabbast :)
>
> ```php
> <script type="text/javascript">
> function show_palz(palette_id) {
>     document.getElementById(palette_id).className = "palette2";
> }
> </script>
> 
> <style type="text/css">
> .palette1 { display: none; }
> .palette2 { display: block; position:absolute; left:520px; top: 20px; z-index:100; }
> .editme   { display: block; margin-top: 20px; width:500px; height:300px; font-face:verdana; padding:3; border:1px solid #CCCCCC; scrollbar-base-color:gray; overflow:auto; }
> </style>
> 
> <div id="foo" contenteditable="true" class="editme">
> Some text here..
> </div>
>   
> <div id="palette" class="palette1">
> <iframe width="154" height="104" id="cp1" src="palette.htm" marginwidth="0" marginheight="0" scrolling="no"></iframe>
> </div>
> 
> <a href="javascript:show_palz('palette');">Palette</a>
> ```

Den här gör ju att palett-lagret hamnar till höger om det första, jag vill att det ska hamna under en knapp som befinner sig ovanför första lagret och fäller ut sig över lager 1

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

## #5 — Fuel, 2005-02-10T11:18Z

Har uppdaterat .. sitter som bekant bara & leker ( har lunch ) :)

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

## #6 — Fuel, 2005-02-10T11:20Z

eller så här:

```php
<script type="text/javascript">
function show_palz(palette_id) {
    document.getElementById(palette_id).className = "palette1b";
}
</script>

<style type="text/css">
.hideme { display: none; }

.palette1b { display: block; margin:10px; }
.editme   { display: block; font-face:verdana; font-size:12px; }
.editwin  { width:500px; height:300px; padding:3; border:1px solid #CCCCCC; scrollbar-base-color:gray; overflow:auto; }
</style>
<button onclick="javascript:show_palz('palette');">Palette 1</button>
<div id="palette" class="hideme">
<iframe width="154" height="104" id="cp1" src="palette.htm" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div>
<div id="stuff" class="editme">
Edit here:
<div id="foo" contenteditable="true" class="editwin">
Some text here..
</div>
</div>
```

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

## #7 — ironhead, 2005-02-10T19:42Z

Nu flyttas hela foo-diven ner hela storleken på paletten istället...jag vill att paletten ska "överlappa foo-diven"

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

## #8 — Fuel, 2005-02-10T20:43Z

Varsågod ! 

```php
<html>
<head>

<title>Palett Rally</title>

<script type="text/javascript">
function visa(p)
{
	for (i=1; i<4; i++){
		if (p==i) {
			document.getElementById('palette'+p).style.display='block';
		} else {
			document.getElementById('palette'+i).style.display='none';
		}
	}
}
</script>

<style type="text/css">

#palette1, #palette2, #palette3
{
    position: absolute;
    top: 50px;
    left: 20px;
    z-index: 10;
    width: 154px;
    height: 104px;
    display: block;
    padding:10px;
    background-color: #eeeeee;
}

#palette1 { border:2px solid #ff0000; }
#palette2 { border:2px solid #FF8000; }
#palette3 { border:2px solid #0080FF; }

.editWin
{
    display: block;
    font-face: verdana;
    font-size: 12px;
    width: 500px;
    height: 300px;
    padding: 3;
    border:2px solid #444444;
    scrollbar-base-color: gray;
    overflow: auto;
    z-index:1;
}
</style>

</head>

<body>

<a href="javascript:visa('0');">Standard</a> | 
<a href="javascript:visa('1');">Palette 1</a> | 
<a href="javascript:visa('2');">Palette 2</a> | 
<a href="javascript:visa('3');">Palette 3</a>

<p>Edit here:</p>
<div id="foo" contenteditable="true" class="editWin">
Some text here..
</div>

<div id="palette1" style="display:none;">
Palette 1 <p>[<a href="javascript:visa('0');">X</a>]</p>
</div>

<div id="palette2" style="display:none;">
Palette 2 <p>[<a href="javascript:visa('0');">X</a>]</p>
</div>

<div id="palette3" style="display:none;">
Palette 3 <p>[<a href="javascript:visa('0');">X</a>]</p>
</div>

</body>
</html>
```

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

## #9 — ironhead, 2005-02-10T20:53Z

ah! Snyggt!
Tack så hemskt mycket :D

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/122135-div-ovanpå-div-i-absolut-position