oje, após 4 horas de depuração, aprendi essa regra da maneira mais difíci

Um elemento pai nunca é capaz de cobrir (empilhar em cima) seu elemento filho se o pai tiver um índice z de qualquer valor, não importa como você altere o CSS da criança

Minha pergunta é: como posso entender esse comportamento pela lógica? Isso está na especificação? Está no documento em algum lugar?

Code (também no Code Penhttps: //codepen.io/anon/pen/ywyrL):

<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;
}