css - 如何解决定位问题？

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 .