1

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

这是我正在使用的 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>

一切正常，除了它覆盖了已经存在的内容，而我希望它把它全部向下推。

任何帮助表示赞赏。

4

1 回答 1

0

使用直接在切换 div 下方的 clearfix 方法或其包装器应该可以解决此问题：

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

CSS：.clearfix { clear: both; }

于 2013-11-13T10:22:12.330 回答