z-index non funziona?

Question

Io uso jQuery per creare un div apear, quando clicco su un pulsante -> lo sfondo dovrebbe avere una opacità di 0.8 e il div apparirà permetterà all'utente di fargli accedere - tutto bene quando non uso z- indice, ma ho 4 div (header, content, footer, e div con login-Form) deve avere z-index: 3 e content z-index: 2 - altrimenti le ombre non funzioneranno come previsto.

Con jQuery aggiungo un div dopo il tag body che contiene il lato completo - quindi posso impostare l'opacità, ma poi devo impostare lo z-index per il form-div più alto di quello per il div con opacità - ma non funziona. z-index del form-div è 999, l'altro div ha 5

Eventuali soluzioni alternative o qualcosa per z-index?

Answer 1

Modificare la posizione dell'elemento.

position: relative; 

Answer 2

È necessario assicurarsi che position sia definito nel CSS. se si desidera che z-index venga implementato nell'elemento normale dell'HTML, quindi aggiungere position:relative al proprio elemento.

Answer 3

Vecchia domanda ma pubblicherò comunque se qualcun altro viene in cerca di una soluzione.

z-index non è così semplice come potrebbe sembrare. Fare z-index su element1 = 999 e su element2 = 1 non significa sempre che l'elemento 1 sarà in primo piano.

Ho avuto una situazione simile una volta, e ho cambiato lo z-index con jQuery quando avevo bisogno che l'elemento fosse di fronte, e funzionava bene. Ciò significa che z-index si preoccupa del tempo in cui hai dato quell'indice. Se vuoi dargli un valore di 999, dai al momento nel momento in cui vuoi che sia in primo piano. Questo potrebbe far sì che rimanga in cima, ma potrebbero ancora essere applicate altre regole, vale a dire: ordine di sovrapposizione. Questo argomento è abbastanza ampio da trattare qui, quindi ti indicherò qui: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Answer 4

È necessario fare qualcosa sull'elemento genitore.

overflow: visibile;

Questo ti farebbe.