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代码：

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;
}

Answer 1

这里有两个问题：

绝对定位元素相对于相对定位的父元素布局。您没有指定#container或#header是相对定位的，所以一切都与body对齐 - 可能不是您想要的。
您的两个容器div #container和#header是浏览器的完整宽度。您希望将它们约束为800px，以匹配图像，并将其与margin: auto对齐：

＆＃13;

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

＆＃13;

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

Answer 2

这是因为if(audioRecorder) { // You can use audioRecorder safely here }定位相对于身体起作用，如果它没有任何父absolute

添加此代码

position:relative

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

2 个答案: