Как переопределить «унаследованные» z-индексы?

Question

Мне нужно переопределить понятие унаследованных z-индексов.

Например, в этом коде

<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

Я хочу, чтобы отображалось div 2, но вместо этого выводилось div 3.Как я могу изменить это поведение, не меняя мою структуру.

Answer 1

Вы не можете дать ребенку более z-index, чем его родитель. Возможно, вы захотите переосмыслить свой дизайн, если это так, или попробуйте временно выкинуть ребенка из родительского элемента, чтобы показать его с более высоким индексом, чем его родитель.

Физический порядок div в этом случае также может помочь. Если вы переместите первый вниз за последним, вы получите предпочтительный рендеринг. Но это не может быть идеальным для вашей ситуации.