當瀏覽器窗口調整大小時，如何保持絕對位置的元素

Question

我絕對定位了文本，以便它位於我的標題圖像內，但我無法弄清楚如何在瀏覽器重新啓動時不讓它移出標題尺度的。如果瀏覽器窗口重新調整爲較小的大小，文本會移出頁眉，但如果瀏覽器窗口重新調整爲較大的大小，則文本會一直移動到頁眉的右側！

標題寬800px，高150px，位於瀏覽器窗口中間。

這裏是我的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

這是因爲absolute定位，如果它不具有position:relative

任何父母的工作相對於身體

添加該代碼

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

Answer 2

這裏有兩個問題：

1. 絕對定位的元素相對於相對定位的父佈局。你沒有指定#container或#header是相對定位的，所以一切都相對於body - 可能不是你想要的。

2. 您的兩個容器div #container和#header是完整的瀏覽器寬度。你想他們限制在800px，對圖像匹配，並與margin: auto中心他們：

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

這裏有一個Codepen： http://codepen.io/eldarshamukhamedov/pen/dGKJGm