Не используйте CSS позиционирование: абсолютное для наложения двух элементов

Предоставленный HTML использует изображение и заголовок внутри элемента карточки. Первоначально была попытка использовать абсолютное позиционирование для заголовка, но это нарушило макет. Предлагается решением с использованием сеточной компоновки, которая позволяет как изображению, так и заголовку занимать одну и ту же область сетки. Этот подход с сеточной компоновкой сохраняет правильный макет и визуальное представление.