slideToggle顶部向下推动所有内容，而不是覆盖当其他div有不同的Z指数？

Question

我有隐藏在页面加载和单击按钮时滑动切换div显示。 div的高度为250像素，位于顶部0px。我也尝试了最低的100％这种做同样的事情。我正在使用几层z-index，并且必须使用绝对位置来放置一些div，以便获得我想要的布局。但我希望有一种方法可以在滑动切换显示时将所有这些div降低250px。我在想，不是使用切换div，也许有一种方法将页面滚动到-250像素，以便所有内容看起来都一样，但被推下了？

这是我使用的情况下，在div的CSS有一些东西可以在这里完成：

#slidingTopBar 
{ 
background:#199651; 
display:inline-block; 
position: fixed; 
height:250px; 
width:100%; 
left:0px; 
top:0px; 
z-index:56; 
} 

的切换脚本被用作如下：

$(document).ready(function(){ 

$("#slidingTopBar").hide(); 
$(".show_hide").css('position','absolute').show(); 

$('.show_hide').click(function(){ 
$("#slidingTopBar").css('position','absolute').slideToggle(); 
}); }); 

正在使用此HTML调用切换：

<div id="TopBar"><a href="#" class="show_hide">SHOW</a></div> 

这是所有工作，除了它overlayin g已经存在的内容，而我希望它把它全部推下去。

任何帮助表示赞赏。

Answer 1

使用clearfix方法正下方的切换股利或它的包装应该解决这个问题：

HTML：<div class="clearfix"></div>

CSS：.clearfix { clear: both; }