css - 让文本留在父 div 中，在图像上方？

Question

我有这个 HTML:

<div style="position: relative;">
    <img width="100%" src="images/some.jpg"> 
    <div class="header">
        <h1>my header</h1>    
        Some more<br>text
    </div> 
</div>

这是 CSS:

.header {
    color: #000000;
    font-size: 52px;
    left: 70%;
    position: absolute;
    text-align: right;
    top: 0;
}

h1 {
    font-size: 52px;
    margin-bottom: 0;
}

现在，当我调整页面大小时，出现 1 个问题:

1. 在某些时候，文本不再位于图像上方 100%，但这是为什么呢？

Answer 1

你想要这样吗？

HTML

<div style="position: relative;">
    <div class="header">
        <h1>my header</h1>    
        Some more<br>text
        <img width="100%" src="/image/some-image.jpg"> 
    </div> 
</div>

CSS

.header {
    color: #000000;
    font-size: 52px;
    left: 70%;
    width: 100%;
    position: absolute;
    text-align: right;
    top: 0;
}
h1 {
    font-size: 52px;
    margin-bottom: 0;
}

演示:http://jsfiddle.net/cT7Sy/