Question

CSS

#div1{
    height:50px;
    visibility:hidden;
    position:relative;
    z-index:1;
}

#div2{
    margin-top:70px:
    position:relative;
    z-index:0;
}

JavaScript的：

function switch01(){
    $("#div1").slideToggle("slow");
};

我期望#div1在滑动期间重叠#div2，因为它的z-index更高。像在不同的层上的东西。但相反，#div1推动#div2向下增加其上边距。

Answer 1

要获得“重叠”效果，您需要从布局流中移除滑动元素。

将position设置为absolute或fixed

即可完成此操作

以下是您想要做的工作示例......

HTML

<a id="button" href="#">Click me!</a>
<div id="div1">Slides on Top</div>
<div id="div2">Rests in bottom</div>

CSS

#div1 {
    height:100px;
    position:absolute;
    background-color: red;
    display: none;
}

#div2 {
    margin-top:10px;
    background-color: green;
}

JS

$("#button").click(function () {
    $("#div2").slideToggle("slow");
});

有关position属性Click here的更多内容希望能帮助到你！

Answer 2

切换到绝对定位

#div1{
height:50px;
visibility:hidden;
position:absolute;
z-index:1;
}

#div2{
margin-top:70px:
position:absolute;
z-index:0;
}

如何在不同的图层上放置div？

2 个答案: