jquery - 如何停止切换面板推送其余内容

Question

我正在尝试制作一个滑动面板，该面板在切换功能时会覆盖内容，但会将所有内容向下推!

.flip{
  display: inline;
}
.panel
{
    background: #999999;
    line-height: 1.5em;
    width: 300px;
    padding: 1% 0;
    display:none;
}
.panel,.flip
{
    float:right;
    text-align:center;
}

js

$(document).ready(function () {
    $(".flip").click(function () {
        $(".panel").slideToggle(350);
    });
});

这是我在 jsfiddle 遇到问题的非常接近的代码示例

http://jsfiddle.net/alinem/9yHSE/

(切换按钮在右上角)

这是我在页面上的代码

http://ire.siload.com/

我怎样才能让它覆盖而不是推送内容？

谢谢你的帮助

Answer 1

Demo Fiddle

你需要给滑动面板position:absolute;，将它的顶部偏移你的nav的高度，所以给它top:40px，给它一个 z-index 为 1 和下面的内容(Slider)一个 z-index 为 0

.panel {
    background: #999999;
    line-height: 1.5em;
    width: 300px;
    padding: 1% 0;
    display:none;
    position:absolute;
    z-index:1;
    top:40px;
}

.Slider {
    padding: 0px;
    z-index:0;
    width: 100%;
}