Почему цвет фона блока уходит под картинку?

Question

Почему фон блока внизу перекрывается картинкой над ним, когда его поднимают margin-top?

Я ожидал что блок (текст и фон) будет над картинкой, но выглядит будто 2 разных слоя получают разные приоритеты над картинкой.

.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>

Answer 1

Похоже это довольно известная и отвратительная тема, которую раскрывают тут:

https://stackoverflow.com/questions/48731110/why-the-content-is-not-covered-by-the-background-of-an-overlapping-element

БЛОГ НА HUSL

Почему цвет фона блока уходит под картинку?

Ответы (1 шт):