Come assegnare un elemento figlio a un indice z maggiore rispetto all'elemento principale

Question

Ho riscontrato un piccolo problema con z-indexing.

Ho un'intestazione e al suo interno un collegamento. L'intestazione ha uno z-index di 5 e il link ha uno z-index di 15. Quando apro un modale, l'overlay scuro dovrebbe trovarsi sopra l'intestazione, quindi gli ho dato uno z-index di 10. Il problema è che il collegamento all'interno dell'intestazione dovrebbe essere sopra l'overlay, ma è dietro di esso. Ho persino dato al link una posizione di relativo, ma non fa nulla.

Qualcuno può aiutarmi con questo problema?

Answer 1

z-index è relativo ai fratelli all'interno dello stesso genitore. Dovrai prendere lo <a> dal <header> per creare l'effetto desiderato.

Se il genitore ha una minore z-index rispetto al modal, tutto ciò che sarà dietro il modal, a prescindere dei bambini z-index

Si prega di allegare anche una jsFiddle o qualcosa in modo che possiamo mostrarvi come risolvere questo problema.

Answer 2

È possibile assegnare al genitore DIV z-index: inherit e un elemento all'interno del div padre. z-index più alto della sovrapposizione.

Answer 3

Se qualcun altro mai ha questo problema, ecco una possibile soluzione: http://jsfiddle.net/flobar/r6zeoc0y/

Quello che ho fatto è stato ho usato il header come contenitore. Ho quindi separato gli elementi che dovevano essere al di sotto e al di sopra della sovrapposizione in separati div con diverso z-index. Ho anche utilizzato position: absolute; per posizionarli correttamente all'interno dello header. Ad esempio, non ti imbatti nel problema dei figli che ereditano lo z-index del genitore.