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

我试图做一个滑动面板，在切换功能，它覆盖的内容，但它推下来的一切

.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

下面是我在JSFIDLE遇到问题的非常接近的代码示例

（切换按钮位于右上角）

这是我的代码直播页面

如何使其覆盖而不是推送内容

谢谢你的帮助

您需要给出滑动面板的

位置：绝对

，将其顶部偏移

nav

的高度，因此给它

top:40px

，给它一个

z-index

为1，下面的内容（滑块）一个

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%;
}

---

非常感谢，但仍然有一个小问题…即使浮动是正确的，它仍然会在屏幕左侧向下滑动！！好吧…这太奇怪了！！它在JSFIDLE上工作，但当我将同样的东西应用到网站上时……当滑块滑动时，它只显示几毫秒，然后当滑块显示图片时，它就会消失！！从技术上讲，它在滑块传输时显示！！在那里你可以看到它发生了什么！将

position:relative

和

z-index:0

添加到

.main

非常感谢您……您是生命的救世主。当我部署它时，它可以在网站上工作，但在本地不工作！！我的visual studio有什么问题吗？或者。。。！！！如果你在原问题的背景下得到了答案-你应该接受它，听起来你现在有了新问题的理由（VS相关）

.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%;
}