Проблема с z-индексом с несколькими элементами с абсолютным расположением

Question

Можно ли привести элемент на передний план, который находится внутри элемента с абсолютным расположением и лежит под другим элементом с абсолютным расположением?

Например:

<div id="el1"> 
    <div id="test1">Test 1</div> 
</div> 
<div id="el2"> 
    <div id="test2">Test 2</div> 
</div> 

CSS:

#el1, #el2, #test1, #test2 { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

#el1 { 
    z-index: 2; 
} 

#el2 { 
    z-index: 1; 
} 

#test1, #test2 { 
    z-index: 3; 
} 

Все элементы являются абсолютным позиционированным и первым лежат над вторым. Теперь я хочу иметь оба тестовых элемента на переднем плане. Это невозможно, потому что для второго индекс z не применяется, потому что он находится внутри # el2. Есть ли какое-либо решение для этого или я должен поставить тестовые элементы за пределы других?

Answer 1

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

<div id="el1"> 
</div> 
<div id="el2"> 
</div> 
<div id="test1">Test 1</div> 
<div id="test2">Test 2</div>