ня, после 4 часов отладки, я усвоил это правило:

Родительский элемент никогда не сможет покрыть (сложить поверх) свой дочерний элемент, если у родительского элемента есть z-индекс любого значения, независимо от того, как вы изменили CSS дочернего элемента.

Мой вопрос: как я могу понять это поведение по логике? Это в спецификации? Это где-то в документе?

Код (также в Code Penhttps://codepen.io/anon/pen/ywyrLq):

<div class="container">
  <h1>1. I can never be covered by parent if my z-index is positive.</h1>
  <h1>2. Even when my z-index is nagative, I still can never be covered if my parent has any z-index at all.</h1>
</div>

.container {
  width: 600px;
  height: 600px;
  background-color: salmon;
  position: relative;
  z-index: 99;
  margin-top: 20px;
  padding-top: 10px;
}

h1 {
  background-color: pink;
  position: relative;
  z-index: -1;
  font-family: monospace;
}