Links nicht anklickbar wegen Z-Index

Question

Ich habe ein Div mit absoluter Position auf einer Seite, die beim Scrollen über ein anderes Div überlappt. Ich möchte es unsichtbar machen, wenn es zu einem bestimmten Div scrollt.

Zu diesem Zweck verwende ich die z-index. Ich setze die z-index 1 der div, die ich verstecken möchte, und viel höher z-index für die andere div. Allerdings versteckt es nicht das div. Wenn ich die z-index auf -1 setze, dann verbirgt es sich, aber dann sind die Links auf diesem div nicht mehr anklickbar. Wie kann ich das beheben?

Hier ist mein Code:

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

Das Problem ist also in obigem Beispiel, dass die Links in der .box nicht anklickbar (wegen -ve z-index Wert), und wenn ich es positiv setze, wird es sich nicht hinter dem verstecken .Nieder.

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

Answer 1

Eigentlich z-index funktioniert nur mit position so gab ich die position:relative; zu Ihrer .down Klasse.

Siehe unten CSS erwähnt & 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

Um z-Index auf der jeweils anderen zu gehen, die werden Sie beide Elemente positioniert haben.

eine bessere Beschreibung:

Definition und Verwendung

der z-Index-Eigenschaft gibt die Stapelordnung eines Elements.

Ein Element mit größerer Stapelreihenfolge befindet sich immer vor einem Element mit einer niedrigeren Stapelreihenfolge.

Hinweis: Der z-Index funktioniert nur bei positionierten Elementen (Position: absolut, Position: relativ oder Position: fest).

So benötigen Sie:

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

in den Klassen diese 2 Änderungen vornehmen. Der Z-Index funktioniert nicht in .down, da Sie keine Position eingegeben haben. Und der -ive Z-Index in .box ist nicht erforderlich. Z-index funktioniert wie Layer, ein Element mit dem Z-Index 1 befindet sich unter jedem Element, das einen höheren Z-Index als 1 hat. Natürlich müssen die Elemente positioniert werden, damit dies funktioniert.

Answer 4

auch ich hatte das gleiche Problem. Ich löste es, indem ich die Z-Index Werte mit einem Wert größer als -1 änderte.

Ich habe die vordere Schicht 2 und hinter 1, so hat es funktioniert.