CSS Z-Index. Почему дочерний «абсолютный» элемент отображается в родительском «относительном» элементе, если дочерний эл ⇐ CSS

[Anonymous]

Я столкнулся с неожиданным поведением при использовании z-index для дочернего элемента.
Чтобы продемонстрировать, что я имею в виду, я использовал этот код в https://jsfiddle.net/< /p>

Код: Выделить всё

RELATIVE ELEMENT

ABSOLUTE ELEMENT

Я ожидаю, что дочерний элемент будет полностью скрыт, поскольку у него есть буква z. -index: -1
Но я вижу, что дочерний текст и цвет фона отображаются в родительском элементе.
Странно то, что серый цвет фона родительского элемента заменяется красным фоном дочернего элемента, но текст родительского элемента «ОТНОСИТЕЛЬНЫЙ ЭЛЕМЕНТ» виден в перекрытии.
Если я удалю «z-index: 0» из родительский, то дочерний элемент скрыт, как и ожидалось.
Я думал, что если значение z-index не указано, то по умолчанию элемент имеет значение z-index: 0, поэтому я ожидаю, что поведение будет то же самое с z-index:0, объявленным в родительском элементе, или без него.

Подробнее здесь: https://stackoverflow.com/questions/787 ... t-relative