Overlapped background - text and background-color inconsistency

Question

.background {
width: 50%;
height: 10rem;
overflow:hidden;
}

.mysection {
background-color: red;
position:relative;
margin-top:-4rem;
}

.mysection h1 {
color: white;
}

<div class="background">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/NGC_4414_%28NASA-med%29.jpg/1024px-NGC_4414_%28NASA-med%29.jpg">
</div>

<section class="mysection">
  <h1> section text </h1>
</section>

I was following along a React tutorial when I noticed a strange behavior in the code snippet above (simplified from the full code).

When position:relative is removed from .mysection, the <h1> remains above the <img>, but the background-color of .mysection goes behind the <img>.

Why does removing position:relative cause this? Shouldn't <h1> get moved along with .mysection?