如何解决定位问题？

Question

我这里有真正的头脑。我有一个父元素包含两件事：英雄形象和文字。现在，为了使这个英雄形象始终“粘合”＃34;对于浏览器窗口的底部，我被迫使用绝对定位。这就是问题：文本的定位应该与英雄形象本身相关，所以我不必在屏幕尺寸变化时重新定位它们。知道怎么做到这一点？我现在要求直接解决方案。我想看看问题解决背后的逻辑，我认为这将非常有用。

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。