Nie można klikać odnośników z powodu indeksu Z

Question

Mam div z pozycją bezwzględną na stronie, która podczas przewijania zachodzi na inny element div. Chcę, aby było niewidoczne, gdy przewija się do określonego elementu div.

W tym celu używam z-index. Ustawiam z-index 1 elementu div, który chcę ukryć, i znacznie wyżej z-index dla drugiego elementu div. Jednak nie ukrywa div. Jeśli ustawię wartość z-index na -1, to zostanie ona ukryta, ale wtedy łącza tego elementu div nie będą już klikalne. Jak mogę to naprawić?

Oto mój kod:

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

Więc problem w powyższym przykładzie jest to, że linki w .box nie są klikalny (z powodu -ve z-index wartości), a jeśli ustawię go jako dodatni, to nie będzie chować się za .na dół.

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

Answer 1

Faktycznie z-index działa tylko z position, więc podałem position:relative; do klasy .down.

Zobacz wymienione poniżej 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

Aby z-index, aby przejść na szczycie siebie będziesz oba elementy się znakomicie.

Lepsze opis

Definicja i użycia

właściwości z indeksu wskazuje kolejność stosu elementu.

Element o większej kolejności stosu znajduje się zawsze przed elementem o niższej kolejności stosu.

Uwaga: Wskaźnik Z działa tylko na pozycjonowanych elementach (pozycja: bezwzględna, pozycja: względna lub pozycja: stała).

Więc trzeba:

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

Dodać te 2 zmiany w klasach. Indeks Z nie będzie działał w .down, ponieważ nie umieściłeś pozycji. I nie ma potrzeby korzystania z -indywidualnego indeksu z .box. Indeks Z działa jak warstwy, element z indeksem Z 1 będzie pod dowolnym elementem, który ma wyższy indeks z niż 1. Oczywiście, aby to działało, elementy muszą być pozycjonowane.

Answer 4

miałem ten sam problem zbyt. Rozwiązałem go, zmieniając wartości z wartością większą niż -1.

Zrobiłem przednią warstwę 2 i za 1, więc zadziałało.