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

I have absolutely positioned text so that it sits inside of my header image, but I cannot figure out how to keep it from moving outside of the header when the browser gets re-sized. If the browser window gets re-sized to a smaller size, the text moves outside of the header, but if the browser window gets re-sized to a bigger size, the text keeps moving to the right of the header!

我绝对定位文本，使其位于我的标题图像内部，但我无法弄清楚当浏览器重新调整大小时如何防止它移动到标题之外。如果浏览器窗口重新调整为较小的大小，则文本移动到标题之外，但如果浏览器窗口的大小调整为更大，则文本将继续移动到标题的右侧！

The header is 800px wide and 150px tall, and it's positioned in the middle of the browser window.

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

Here's my HTML code:

这是我的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>

Here's my CSS code:

这是我的CSS代码：

body {
    margin: 0px;
    padding: 0px;
}

#header h1 {
    color: #FFFFFF;
    position: absolute;
    top: 0px;
    left: 305px;
}

#header h2 {
    color: #FFFFFF;
    position: absolute;
    top: 30px;
    left: 330px;
}

#header img {
    width: 800px;
    height: 150px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

2 个解决方案

#1

There are two issues here:

这里有两个问题：

Absolute positioned elements are laid out with respect to a relative positioned parent. You didn't specify that either #container or #header are relative positioned, so everything is aligned with respect to body - probably not what you want.

绝对定位元素相对于相对定位的父母布置。你没有指定#container或#header是相对定位的，所以一切都与身体对齐 - 可能不是你想要的。
Your two container divs, #container and #header are full browser width. You want to constrain them to 800px, to match the image, and center them with margin: auto:

你的两个容器div，＃container和#header是完整的浏览器宽度。您希望将它们约束为800px，以匹配图像，并将它们与margin对齐：auto：

#header {
  position: relative;
  width: 800px;
  margin: auto;
}

Here's a Codepen: http://codepen.io/eldarshamukhamedov/pen/dGKJGm

这是一个Codepen：http：//codepen.io/eldarshamukhamedov/pen/dGKJGm

#2

That is because absolute positioning works relative to the body IF it does not have any parent with position:relative

这是因为绝对定位相对于身体是有效的，因为它没有任何具有位置的父亲：相对

Add this code

添加此代码

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

#1