Почему не удается задать поверх картинки полупрозрачный черный фон?

Question

[Рамазан]

Привет! Мне нужно поверх фоновой картинки в самом низу сайта карточкам задать полупрозрачный черный фон. Ранее в блоке cover мне удалось это сделать, но сейчас делаю вроде то же самое, но почему-то все равно фон для каждого блока не накладывается сверху на фоновые картинки. Добавил в каждую карточку overlay и задал ему z-index: 0, position: absolute и background-color. Подскажите, пожалуйста, что делаю не так

Тут как должно быть:


А у меня так:

Comments

[ksnk]

https://developer.mozilla.org/en-US/docs/Web/CSS/b...
не?
накладывать на .card__text, вероятно

Answer 1

[Рамазан]

Все получилось. Оказывается нужно было задать position: relative для overlay

Comments

[Рамазан]

но теперь текста не видно у карточек)

[Danny Arty]

Рамазан, потому что у текста, как и у прочих элементов, по умолчанию position: static, а любое прочее значение свойства position создает новый контекст наложения, то бишь ваш overlay по оси Z теперь находится выше, чем текст, поэтому он его и перекрывает. Советую читать доки