如何将H1带到Div的顶部

Question

我刚刚开始学习HTML。在我的HTML中，有一个包含图像和h1标签的div。现在h1位于div下。如何将h1定位在图像的中心？

<div class="headwrap">
    <div class="headimage"><img src="images/Header-image1.jpg">
    <h1 class="headtxt"> I Love Photography</h1>
    </div>
</div>

CSS：

.headwrap {
    margin: 0;
    max-width: 1500px;
    width: 100%;
    height: 100%;

}
.headimage {
    max-width: 1500px;
    width: 100%;
}
.headtxt {
    margin: 0 auto;
    padding: 0;
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    float: left;
}

Answer 1

您可以在父元素上使用position: relative，然后将position: absolute放在H1标签上：

.headwrap {
margin: 0;
max-width: 1500px;
width: 100%;
height: 100%;
position: relative;

}
.headimage {
max-width: 1500px;
width: 100%;
}
.headtxt {
position: absolute;
top: 0;
}