How does the position of child elements affect z-index of elements

Question

I found that when element A is positioned as fixed and element B is positioned by default, element B is overwritten by element A when the document is scrollable.

But when element B position is not static, element B can override element A when the document is scrollable.

Why does the position setting of child elements can affect the parent element level?

<div class="head">
head
</div>
<div class="gap"></div>

<div>
  <textarea></textarea>
</div>

<div>
  <textarea class="position"
  ></textarea>
</div>
<div class="gap"></div>

.head {
  position: fixed;
  top:0;
  width: 100%;
  line-height: 50px;
  background: red;
}
.gap {
  height: 300px;
}
textarea {
  height: 50px;
}

.position {
  position: relative;
}

the example https://jsfiddle.net/3sjtz8ou/11/