Why is lower's block background goes below upper block when moving with margin-top?

Question

Looks like the background of my div is layered below the image when I move it up with a negative margin-top. Expected result would be to see both text and background above the image.

.thumb img {
  width: 100%;
}

.header-desc {
  margin-top: -2.5em;
  background: red;
}

<div class="header">
  <div class="thumb">
    <img src="https://www.online-image-editor.com/styles/2019/images/example_image.png">
  </div>
  <div class="header-desc">
    <h1>Header</h1>
  </div>
</div>

Would be awesome to know the explanation to why this is happening.