How to override "inherited" z-indexes?

Question

I need to redefine the concept of inherited z-indexes.

For example, 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 to div 2be displayed, but displayed instead div 3. How can I change this behavior without changing my structure.

Answer 1

You cannot give a child higher z-indexthan his parent. You might want to rethink your design, if so, or consider temporarily removing the child from the parent in order to show it at a higher index than its parent.

div . , . .