リンクがZ-インデックスのためクリックできない

Question

スクロールするときに別のdivにオーバーラップするページ上の絶対位置を持つdivがあります。私はそれが特定のdivにスクロールすると見えないようにしたい。

この目的のために、私はz-indexを使用しています。私はz-indexのdivのうち1つを非表示にし、他のdivのはるかに高い数字をz-indexに設定しています。しかし、divを隠すことはありません。 z-indexを-1に設定すると、非表示になりますが、その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; 
} 

したがって、上記の例では、問題が■は内のリンクではないということですクリック可能（-ve z-indexの値のため）、私がそれを正に設定すると、その背後に隠れません.down。

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

Answer 1

実際にz-indexはpositionとしか動作しませんので、.downクラスにposition:relative;を渡しました。

は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; 
    } 

DEMO

Answer 2

Zインデックスの両方の要素が配置されていることになる互いの上に行くようにするために。

より良く説明：

定義および使用

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

スタックオーダーの大きいエレメントは、常にスタックオーダーの低いエレメントの前にあります。

注：zインデックスは、位置指定された要素（位置：絶対、位置：相対、または位置：固定）でのみ機能します。

だからあなたが必要になります。

.up { 
    height: 100px; 
    position: absolute; 
} 

Answer 3

.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-インデックスはレイヤーのように機能し、Z-インデックス1を持つ要素は、1より高いZ-インデックスを持つ要素の下に置かれます。このためには、要素を配置する必要があります。

Answer 4

私も同じ問題を抱えていました。私はのz-インデックスの値を-1より大きい値に変更して解決しました。

フロントレイヤー2とリアレイヤー1を作りました。