Наложение полупрозрачного оверлея на элемент с background-image

Всем привет, у меня такой вопрос: Я прохожу курс по bootstrap 4. В этом курсе его автор демонстрирует технику затемнения background-изображения через наложение на него темного полупрозрачного оверлея. Он делает это так: Во-первых, есть два div-элемента: div.container и вложенный в него div.dark-overlay(это не бутстраповский, а пользовательский класс). Вот html-код:

<div class="container">
  <div class="dark-overlay"></div>
</div>

Во-вторых, вот css-код к ним:

.container {
  position: relative;
  min-height: 200px;
  background-image: url(...);
}
.dark-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); //полупрозрачный черный цвет
}

Так вот, мне непонятно, зачем здесь нужно абсолютное позиционирование dark-overlay элемента, ведь гораздо более простой вариант(без свойства position) тоже работает на всех брейкпоинтах и при добавлении любого объема контента.

.container {
  min-height: 200px;
  background-image: url(...);
}
.dark-overlay {
  min-height: 200px;
  background-color: rgba(0, 0, 0, 0.7); //полупрозрачный черный цвет
}

Я встречаю технику с применением position: absolute; уже не в первый раз и в нескольких местах, да и сам автор курса явно хорошо понимал, что он делает. Я просто хочу узнать, зачем это нужно, а также понять, существуют ли ситуации, когда мой более простой вариант не будет работать.