animated div... can't get it to stop pushing all divs (Magento)

It's a bit hard to explain but here goes. I have a div that uses jquery to animate it's height using toggle. Basically the div is initially hidden but if you press a button it expands the height defined in the css. Here's the js:

开发者_如何学Python

jQuery(document).ready(function() {
jQuery('.slidedown').hide(); 
  jQuery("button").click(function() {
    jQuery('.slidedown').animate({
   height: ['toggle', 'swing'],  
  }, 500, function() {    
  });
});

});

So i have a div with class "slidedown". Press the button and it expands downwards. However when the div animates it pushes all the other divs on my page down too. I just want the div to expand but go over everything else on the page. What i'm trying to achieve is actually a drop down shopping cart display in Magento, you mouse over the word 'shopping cart' which is in the header and then the cart's contents appear in the div that is revealed. I make the cart contents appear in the div by:

<div class="slidedown"><?php echo $this->getChildHtml('right') ?></div></pre>

Calling getChildHtml('right') inserts the cart contents into the div. That works fine. So far i have only tried putting that div in various locations in the the 2columns-left.phtml template that all my pages are using in Magento. But anywhere i try to insert that div, when it expands it messes up all the others. Any ideas? Thanks for your input.

---

There are several ways to do it, either make it absolute positioned. -- To be honest, I don't suggest that.

A better way in my opinion is to add a parent div and give it a height of 0:

HTML:

<div  class='mask-layer'>
  <div class="slidedown"><?php echo $this->getChildHtml('right') ?></div>
</div>

CSS:

.slidedown {/*for this class you keep the same code */}
.mask-layer {height:0;overflow:visible}

This way you would add some kind of a mask to your shopping cart, so no matter how big it is, the browser will look at its parent div and see that it has a height of 0 and will not push any other HTML element.

P.S. A problem might occur, where the cart will be shown below your other elements, to fix it just add this CSS to .mask-layer:

.mask-layer {height:0;overflow:visible;position:relative;z-index:2 /* or any number as long as it is larger than the z-index of your other elements*/}