How to override "inherited" z-indexes?

Question

I am needing to override the notion of inherited z-indexes.

For instance in this code

<style>
div{
  background-color:white;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}
</style>
<div style="position: fixed; z-index: 2;">
   div 1
   <div style="position: fixed; z-index: 3;">
     div 2
   </div>
 </div>
<div style="position: fixed; z-index: 2;">
 div 3
</div>

http://jsbin.com/epoqo3/3

I want for div 2 to be displayed, but instead div 3 is displayed. How can I change this behavior without changing my structure.

Answer 1

You can't give a child higher z-index than its parent. You may want to rethink your design if this is the case, or consider popping the child out of the parent temporarily to show it on a higher index than its parent.

The physical order of the divs in this case can help as well. If you move the first down after the last, you'll get the preferred rendering. But this may not be ideal for your situation.