0

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

Z インデックスが高いため、スライド中に#div1オーバーラップすると予想していました。#div2別のレイヤーのようなもの。しかし、代わりに、上マージンを増やして#div1押し下げました。#div2

4

2 に答える 2

2

必要な「オーバーラップ」効果を得るには、レイアウトの流れからスライド要素を削除する必要があります。

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属性の詳細ここをクリック.
それが役に立てば幸い！

于 2012-12-05T15:07:39.813 に答える
1

絶対位置決めに切り替え

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

#div2{
margin-top:70px:
position:absolute;
z-index:0;
}
于 2012-12-05T14:34:31.520 に答える