Collegamenti non selezionabili a causa di z-index

Question

Ho un div con posizione assoluta su una pagina che si sovrappone a un altro div durante lo scorrimento. Voglio renderlo invisibile quando scorre a un div specifico.

A tale scopo, sto utilizzando lo z-index. Sto impostando il z-index 1 del div che voglio nascondere, e molto più alto z-index per l'altro div. Tuttavia non nasconde il div. Se imposto lo z-index su -1, questo si nasconde, ma i collegamenti su quel div non sono più selezionabili. Come posso risolvere questo?

Ecco il mio codice:

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

Quindi il problema nell'esempio sopra è che i link nella .box non sono cliccabile (a causa del valore -ve z-index), e se l'ho impostato positivo, non si nasconderà dietro il .giù.

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

Answer 1

In realtà z-index funziona solo con position così ho dato il position:relative; alla classe .down.

Vedere il seguito indicate 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

Affinché l'z-index per passare sopra l'altro si entrambi gli elementi di aver posizionato.

Una descrizione migliore:

Definizione e utilizzo

La proprietà z-index specifica l'ordine di sovrapposizione di un elemento.

Un elemento con ordine di stack maggiore è sempre davanti a un elemento con un ordine di stack inferiore.

Nota: z-index funziona solo sugli elementi posizionati (posizione: assoluta, posizione: relativa o posizione: fissa).

quindi sarà necessario:

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

fare questi 2 cambiamenti nelle classi. Z-index non funzionerà in .down come non hai messo la posizione. E non c'è bisogno di -ive z-index in .box. Z-index funziona come i livelli, un elemento con z-index 1 sarà sotto qualsiasi elemento che abbia un più alto indice z rispetto a 1. Ofcourse perché questo funzioni gli elementi devono essere posizionati.

Answer 4

Ho avuto lo stesso problema troppo. Ho risolto il problema modificando i valori z-index con un valore maggiore di -1.

Ho fatto lo strato anteriore 2 e dietro 1, quindi ha funzionato.