¿Cómo puedo obtener un elemento secundario de un elemento con un índice z más bajo frente a un elemento secundario de otro elemento con un índice z más alto?

Tengo la siguiente configuración:

<div style="z-index: 10">
      <div>Whatever</div>
</div>

<div style="z-index: 9">
      <div><div>Haaaleluia</div></div>
</div>

Por supuesto ... simplifiqué demasiado la configuración pero esa es la idea principal. El div "lo que sea" está superpuesto por el div "Haaaaleluia". Por supuesto, porque el primer padre tiene un índice z más grande, "lo que sea" es visible y "haaaleluia" no lo es.

Sin cambiar la configuración (y para ser claro, eso incluye mantener los índices z de los padres), ¿cómo puedo hacer que "Haaaaleluia" esté arriba?

Para aquellos a quienes se les pide que impriman aquí es ... también gracias por la ayuda:

El gran mapa malo es el segundo div.

El tutorial es el primer div.

El panel con órdenes es hijo del mapa. Necesito que esté arriba. Si configuro el mapa completo en la parte superior, el tutorial ya no es visible. Si mantengo el mapa detrás del panel de pedidos ya no es visible.

Respuestas a la pregunta(5)

Su respuesta a la pregunta