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");
};

I expected that #div1 overlaps #div2 during sliding, because of its higher z-index. Something like on a different layer. But instead, #div1 pushed #div2 down increasing its top margin.

Answer 1

Switch to absolute positioning

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

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