dragable layers won't jump into place

hello everybody. i'll try and explain my problem the best i can, so that, if i'm lucky, you will be able to help me out.

my "application" consists of the following:
one div called 'frame' wich serves as a holder for:
one div called 'top'
one div called 'hybrid'
one div called 'bottom'

(for simplicity, i will refer to them as layers...they are layers after all, it's just that they are called div's )

with the help of a script found on an open source page, the 'top' layer is draggable; inside the function that actually drags the layer, i also change the style.left and style.top properties of the other two layers ('hybrid' and 'bottom') so that all three move together as one (this is a project that resembles google maps, and i have 3 kinds of maps with dynamic opacity and they all must move as one in order for the different elements (roads, relief and names) to be aligned)

when the onmouseup event is fired, i call a method which tells the server the distance i dragged the pictures and it generates 3 new pictures to match my current position. this is where i'm havving problems.

the first approach was to reset the position of 'top', 'hybrid', 'bottom' to 0,0 and change the src for the contained pictures in order to display the new ones. the picture did load, but the layers didn't move to where i needed them.
second approach was to set 'frame'.innerHTML to "" and re-write all information in it.
i'm doing this by calling the next method:

function createDragableLayerText(layerId, layerContent,opacity,layerBG)
{
	var text = "<div id="+layerId+" style='filter:progid:DXImageTransform.Microsoft.alpha(opacity="+opacity+");-moz-opacity:50;"+
	"position:absolute;left:0px;top:0px;z-index:"+layerBG+"'"+
	" onmouseover='this.onmousedown=dragIsDown;' ondragstart='return false;' onselectstart='return false;'>"+layerContent+"</div>"
	return text;
};

Code (markup):

i first set a variable called inHTMLText = "" then i add to it the result of 3 calls to the above function, with different parameters, for each layer.
basicly i have

inHTMLText = createDragableLayerText('top'..)+createDragableLayerText('hybrid'..)+createDragableLayerText('bottom'..)

Code (markup):

in the end, i assign to 'frame'.innerHTML the value of inHTMLText (document.getElementById('frame').innerHTML = ....)

at this point, this is what i get:

- 'top' layer is at 0,0 position, with corect picture
- 'hybrid' layer is at last position, the one when mouseup event occured, but with corect picture loaded;
- 'bottom' layer is at last position, the one when mouseup event occured, but with corect picture loaded;
ofcourse, pictures DO NOT overlap like they should.

if i click on the 'top' layer and drag it at least one pixel, the other two layers jump in position. calling the method used for moving layers doesn't do the trick, so i'm guessing it has something to do with the mouse events.

is there a way to make sure my layers jump in the desired position? or to force them to do so?
another thing that might be wrong, frame has it's position set to relative...setting it to absolute would make a whole lot of a mess in my script, but if that's what it takes, i'll go there

any questions about the code, i will answer them gladly, just ... let me know what you think...

btw...i'm kinde newbie at javascript, and i guess it shows