调整浏览器窗口大小时如何将绝对定位的元素保持在适当位置

Question

我已经对文本进行了绝对定位，使其位于标题图像的内部，但是当浏览器调整大小时，我无法弄清楚如何防止其移出标题。如果将浏览器窗口的大小调整为较小的大小，则文本将移至标题的外部，但是如果将浏览器窗口的大小调整为较大的大小，则文本将继续向标题的右侧移动！

标头宽800像素，高150像素，位于浏览器窗口的中间。

这是我的HTML代码：

<div id="container">
    <div id="header">
        <img src="images/header.jpg" alt="Site Header Image">
        <h1>Our Site</h1>
        <h2>Catchy slogan...</h2>
    </div>
</div>

这是我的CSS代码：

<div id="container">
    <div id="header">
        <img src="images/header.jpg" alt="Site Header Image">
        <h1>Our Site</h1>
        <h2>Catchy slogan...</h2>
    </div>
</div>

Answer 1

这是因为absolute如果它没有任何父级，则定位是相对于主体进行的position:relative

添加此代码

#header {
  width:800px; /* define a width to the header container */
  position:relative; /* see note */
  margin:0 auto; /* centers header horizontally */
}