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

现在，当我调整页面大小时，有一个问题：

在某些时候，文字不再高于图像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;
}

DEMO：http://jsfiddle.net/cT7Sy/

使文本保留在图像上方的父div中？

1 个答案: