jquery - 如何将 div 放在不同的图层上？

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属性的更多信息，请单击此处。
希望能帮助到你！

Answer 2

切换到绝对定位

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

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