Почему не срабатывает z-index?

Question

[GreenMan1899]

Есть 3 блока.
1 - 100px
2 - 200px
3 - 100px
2-ой принимает абсолютное позиционирование и встраивается наполовину под 1-ый полупрозрачный блок. Т.е. должно получиться так что, за первым блоком просвечивает часть второго блока, который продолжается ниже, а затем идет 3-ий блок.
Я выставил им всем z-index 30, 20 и 10 соответственно, однако 2-блок ложится поверх верхнего, хотя у него z-index меньше.
codepen.io/danilst/pen/rWpwzX?editors=1100

Answer 1

[Артем Каюн]

У вас у первого блока по умолчанию position: static, измените на position: relative и все заработает.

Comments

[GreenMan1899]

почему так? разве relative нужен не для родительского элемента относительно которого двигается дочерний абсолютный?

[Артем Каюн]

У вас тут не дочерних и родительских элементов, все дивы на одном уровне вложенности. z-index работает для элементов у которых position НЕ static. То есть relative, absolute, fixed.