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并且下面的内容（滑块）a 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%;
}

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

1 个答案:

Demo Fiddle