How can I get a child of an element with lower z-index on front of a child of another element with higher z-index?

Question

I have the following setup:

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

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

Of course... I oversimplified the setup but that's the main idea. The "whatever" div is overlapped by the "Haaaaleluia" div. Of course because the first parent has bigger z-index "whatever" is visible and "haaaleluia" is not.

Without changing the setup (and to be clear that includes keeping the parents z-indexes), how can I make "Haaaaleluia" to be on top?

For those asked for print here it is... also thank you for help:

The big bad map is the second div.

The tutorial is the first div.

The panel with orders is child of the map. I need it to be on top. If I set whole map on top, the tutorial is not visible any more. If I keep the map behind the orders panel is not visible any more.

Answer 1

In short: you can't. It's not possible to have a child of a parent element with a z-index lower than a sibling, and give that child a higher z-index value than the parent's sibling, as the inherited z-index is relative to the parent (see this question for someone coming up against the same thing).

However, depending on your setup, you can remove the z-indices completely, and let the browser place your top div above the one below. You could then play around with giving just the children a z-index value.

Josh Comeau has a great article going into depth on the problem and various solutions/workarounds.