Draggable Problem

Draggable Problem

hi,

i'm new to jQuery/Javascript and am having a problem with the draggable feature in UI.  everything works fine when i test the site on my local host but when i access it on the web, the absolute positioning of the draggable windows seems to function as if they were positioned relatively.  it also works fine when i take away the javascript so i'm guessing that is where the problem is. like i said, i'm entirely new to javascript so i'm probably not doing something quite basic.

here is the javascript:

$(document).ready(function() {
$(".draggable1").draggable();
$(".draggable2").draggable();
$(".draggable3").draggable();
$(".draggable4").draggable();
$(".draggable5").draggable();
$(".draggable6").draggable();
$(".draggable7").draggable();
$(".draggable8").draggable();
});
$(document).ready(function() {

$(".sub1").hide();$(".top1").click(function()
{$(".sub1").slideToggle("fast");});
$(".sub2").hide();$(".top2").click(function()
{$(".sub2").slideToggle("fast");});
$(".sub3").hide();$(".top3").click(function()
{$(".sub3").slideToggle("fast");});
$(".sub4").hide();$(".top4").click(function()
{$(".sub4").slideToggle("fast");});
$(".sub5").hide();$(".top5").click(function()
{$(".sub5").slideToggle("fast");});

});

here is the css for a few of the draggables:

.draggable1 {
position:absolute;
left:275px;
top:50px;
z-index:100;
}

.draggable2 {
position:absolute;
left:700px;
top:40px;
z-index:700;
}

.draggable3 {
position:absolute;
left:275px;
top:600px;
z-index:500;
}

thanks!!