title: 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?
body: <p>I have the following setup:</p>
  
  <pre><code>&lt;div style="z-index: 10"&gt;
        &lt;div&gt;Whatever&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div style="z-index: 9"&gt;
        &lt;div&gt;&lt;div&gt;Haaaleluia&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>Without changing the setup (and to be clear that includes keeping the parents z-indexes), how can I make "Haaaaleluia" to be on top?</p>
  
  <p>For those asked for print here it is... also thank you for help:
  <img src="https://i.stack.imgur.com/JZdnV.png" alt="enter image description here"></p>
  
  <p>The big bad map is the second div.</p>
  
  <p>The tutorial is the first div.</p>
  
  <p>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.</p>