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.

questionAnswers(5)

yourAnswerToTheQuestion