Relative and Absolute Layers

[LrdSatyr8]

Ok all... I've got a problem... and can't quite seem to figure out what I'm doing wrong but have a feeling it has to do with the type of layer I'm creating with DIV commands. Here's the problem...

I created a very nice layout of overlapping images each with it's own named absolute DIV layer. The entire layout is contained in a parent named relative DIV layer.

What I'd like to do is be able to move this complete layout anywhere on the page without having to change the absolute positions of all the absolute layers.

I've been experimenting with IFRAMEs but they aren't very cross browser compatible.

Here's an example of what I'm talking about:

<DIV ID="LAYOUT" style="position: relative">
<DIV ID="IMAGE1" style="position: absolute; top:0; left:0">
image1.jpg
</DIV>
<DIV ID="IMAGE2" style="position: absolute; top:10; left:10">
image2.jpg
</DIV>
<DIV ID="IMAGE3" style="position: absolute; top:20; left:20">
image3.jpg
</DIV>
</DIV>

What I'd like to be able to do is move the layer "LAYOUT" anywhere on the page that I'd like to without having to change all the values in the absolute image layers. Does this make sense?

I've been trying to find an WYSIWYG editor that allows you to do relative layer positioning but as of yet I haven't had any luck... I use Dreamweaver, but it doesn't show the relative positioned images.

Another thing I've noticed with relative positioning is that it creates alot of empty space at the bottom of the page you're using it on. Is there any way around this? Any help would be appreciated... thanks.

-=> Satyr! <=-

[hamsterhuey]

I use dreamweaver too and it does allow you to do absolute positioning inside a relative positioned layer like this:
<div id="Layer1" style="position:relative; width:200px; height:115px; z-index:1; left: 130px; top: 78px;">
<div id="Layer2" style="position:absolute; width:84px; height:61px; z-index:1; left: 31px; top: 27px;">img.jpg</div>
</div>

All I did was make a layer with absolute positioning and then put another layer in that one and change the word "absolute" to "relative" in the code manually. It seems to work fine and the absolutely positioned layer inside the other one takes the top-left corner of the outer layer to be 0, 0 so it should all work out

[Whiteknight]

you could make it a javascript function that takes as arguments the relative position you want the object to appear at, and use those values as a base, to write out the DIV at a custom location.

i would have to brush up bigtime on my Javascript before I could offer a working example, but if you know it already, you might be able to figure something out.