Como posso obter um filho de um elemento com menor z-index na frente de um filho de outro elemento com maior z-index?
Eu tenho a seguinte configuração:
<div style="z-index: 10">
<div>Whatever</div>
</div>
<div style="z-index: 9">
<div><div>Haaaleluia</div></div>
</div>
Claro ... eu simplifiquei demais a configuração, mas essa é a idéia principal. O div "tudo" é sobreposto pelo "Haaaaleluia" div. É claro, porque o primeiro pai tem maior z-index "o que quer que" seja visível e "haaaleluia" não é.
Sem alterar a configuração (e para ficar claro que isso inclui manter os índices z dos pais), como posso fazer com que "Haaaaleluia" esteja no topo?
Para quem pediu para imprimir aqui é ... também muito obrigado pela ajuda:
O grande mapa ruim é o segundo div.
O tutorial é o primeiro div.
O painel com pedidos é filho do mapa. Eu preciso que esteja no topo. Se eu definir o mapa inteiro em cima, o tutorial não é mais visível. Se eu mantiver o mapa por trás do painel de pedidos, não será mais visível.