div ovanpå div i absolut position

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...

Tja.. satt & lekte lite som snabbast :)

<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>

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?

Fuel skrev:

Tja.. satt & lekte lite som snabbast :)

<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

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

eller så här:

<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>

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

Varsågod !

<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>

ah! Snyggt!
Tack så hemskt mycket :D