Как решить проблему позиционирования?

Question

У меня настоящий псих здесь. У меня есть родительский элемент, который обертывает две вещи: изображение героя и текст. Теперь, чтобы этот образ героя всегда «склеивался» для нижней части окна браузера, я вынужден использовать абсолютное позиционирование. И вот в чем проблема: позиционирование текста должно быть относительно самого изображения героя, поэтому мне не нужно постоянно их менять, когда изменяется размер экрана. Есть идеи, как это сделать? Теперь я прошу прямое решение. Я хотел бы видеть логику решения проблемы, которая, на мой взгляд, была бы очень полезной.

Answer 1

С CSS3 вы могли бы, например, сделать это

#the-image, #the-text { 
    position: absolute; 
    bottom: 0; 
    left: 50%; 
    transform: translateX(-50%); 
} 

#the-text { 
    font-size: 24pt; 
    bottom: 5rem; 
    color: white; 
    font-weight: 700; 
} 

См Fiddle.