Выпуск z-index с несколькими элементами с абсолютным позиционированием

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>