Top Sliding Panel Issue

[Maxal]

Hi

I am trying to get a hidden div to slide over a visible div when a button of the hidden div is clicked. The problem is that when the hidden div slides in, it pushes the visible div down, instead of sliding over it. The sliding panel has a jQuery link in the header. Here are my codes:

Javascript

$(document).ready(function(){

$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});

});

Stylesheet

body {
margin: 0 auto;
padding: 0;
width: 570px;
font: 75%/120% Arial, Helvetica, sans-serif;

}
a:focus {
outline: none;
}
#panel {
background: #754c24;
width: 570px;
height: 100px;
display: none;

}
.slide {
margin: 0;
padding: 0;
border-top: solid 4px #422410;
background: url(images/btn-slide.gif) no-repeat center top;
position: relative;
}


.btn-slide {
background: url(images/white-arrow.gif) no-repeat right -50px;
text-align: center;
width: 144px;
height: 31px;
padding: 10px 10px 0px 0px;
margin: 0 auto;
display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
.active {
background-position: right 12px;
}

HTML

<div style="display: none;" id="panel">
<!-- you can put content here -->
Sliding Panel text here
</div>

<p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p>


<div>This is the text div.</div>