28

スクロール時に別の div に重なるページ上の絶対位置を持つ div があります。特定のdivにスクロールしたときに非表示にしたい。

そのために、を使用していz-indexます。z-index非表示にしたいdivの1を設定z-indexし、他のdivにははるかに高く設定しています。ただし、div は非表示になりません。-1に設定するz-indexと非表示になりますが、その div のリンクはクリックできなくなります。どうすればこれを修正できますか?

これが私のコードです：

HTML:

<div class="wrap">
    <div class="up"><div class="box"><a href="#">Should hide</a></div></div>   
    <div class="down">Should be visible</div>
</div>

CSS:

.wrap{
    width: 300px;
    position: relative;
    overflow: hidden;
    border: 1px solid #000;

}
.up{
    height: 100px;   
}

.box{
    position: absolute;
    top: 20px;
    background: yellow;
    width: 100px;
    height: 100px;
    z-index: -1; 
}

.down{
    background: green;
    overflow: hidden;
    z-index: 200;
    height: 400px;
}

したがって、上記の例の問題は、.box 内のリンクが (-vez-index値のため) クリックできないことです。値を正に設定すると、.down の後ろに隠れません。

JSFiddle: http://jsfiddle.net/G2xRA/

4

4 に答える 4

31

実際にz-indexは でのみ動作するので、クラスpositionに を渡しました。position:relative;.down

以下のCSS & DEMOを参照してください。

.box{
        position: absolute;
        top: 20px;
        background: yellow;
        width: 100px;
        height: 100px;
        z-index: 1;  
    }

    .down {
        background: none repeat scroll 0 0 green;
        height: 400px;
        overflow: hidden;
        position: relative;
        z-index: 2;
    }

デモ

于 2012-12-10T09:59:04.877 に答える
11

z-index が互いに重なり合うようにするには、両方の要素を配置する必要があります。

より良い説明：

定義と使用法

z-index プロパティは、要素のスタック順序を指定します。

スタック順序が大きい要素は、常にスタック順序が小さい要素の前にあります。

注: z-index は、配置された要素 (position:absolute、position:relative、または position:fixed) でのみ機能します。

したがって、次のものが必要になります。

.up {
    height: 100px;
    position: absolute;
}
于 2012-12-10T09:51:48.983 に答える
4 
.box{
    position: absolute;
    top: 20px;
    background: yellow;
    width: 100px;
    height: 100px;
    z-index: 1;  
}

.down{
    background: green;
    overflow: hidden;
    z-index: 2;
    height: 400px;
    position:relative;
}

クラスでこれら 2 つの変更を行います。位置を指定しなかったため、Z-index は .down では機能しません。また、.box の -ive z-index は必要ありません。Z-index はレイヤーのように機能します。z-index 1 を持つ要素は、1 よりも高い z-index を持つ要素の下になります。もちろん、これが機能するには、要素を配置する必要があります。

于 2012-12-10T09:56:48.827 に答える