Html Div在屏幕大小更改时移动

我有一个静态HTML网站，除了页脚外，它工作得非常完美。本质上，页脚是一个有文本重叠的图像。当屏幕大小改变时，页面上的元素会随之移动以适应屏幕。除了页脚文本。我无法确定我做错了什么，而且相当肯定的是，这件事太简单了，我错过了。 下面是正在发生的事情以及我需要它做什么的示意图：

因此，出于演示目的，白色文本框与上面的左框/边对齐。即使屏幕放大缩小，我也需要文本与“标记”保持一致

然而，当我放大屏幕时，你可以看到上面的白色框在移动，但是文本与它不匹配

页脚的代码如下所示：

    <div class="orangeFooter">
        <img src="images/orange-footer.png">
        <h2><span class="orangeText">Promoting a knowledge based NHS</span</h2>
    </div>

使用此CSS：

.orangeFooter h2 {
  position: relative;
  font-style: italic;
  /* left: 210px; */
  bottom: 80px;
  font-size: 40px;
  display: block;
  margin: 0 auto;
  width: 1016px;
}

---

它使h2 1016px变宽，这是站点的宽度。它也会在你的站点中居中，边距为：0自动

你能提供一个小提琴，或链接到页面吗？没有足够的代码来查看问题相对位置是一个糟糕的布局方法，有更好更灵活的方法可用。抱歉，链接到此处的网站：将图像作为css中指定的div的背景移动。您还可以将图像缩小到所需的高度、1px宽度，并使用repeat填充整个div。

.orangeFooter h2 {
  position: relative;
  font-style: italic;
  /* left: 210px; */
  bottom: 80px;
  font-size: 40px;
  display: block;
  margin: 0 auto;
  width: 1016px;
}