将标签放在不在绝对位置的图像上

Question

这是我的HTML：

<div class="container-fluid">
        <div class="row">
            <div class="header">
                    <img src="test_bg.jpg" class="bg">
            <div class="top-header">
                <div class="col-xs-2 col-xs-offset-1 logo"></div>
                <div class="col-xs-6 col-xs-offset-2 logo"></div>
            </div>
            <h1 class="text-center"> Hello </h1>
            <div class="arrow"></div>
        </div>
    </div>

</div>

这是我的CSS：

$test-color : red;

.header{
    width: 100%;
    height: auto;
}

.top-header{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.bg{
    width: 100%;
    height: auto;

}

.logo{
    background-color: $test-color;
    position: absolute;
    height: 100px;
    z-index: 2;
}

.arrow{
    background-color: $test-color;
    height: 50px;
    width: 50px;

}

结果如下：

我想在图像中间放置h1标签，在图像底部放置底部的红色div（.arrow）。你知道怎么做吗？

Answer 1

说实话，如果您希望它覆盖页面，将背景图像放在header中是不正常的。将其作为body的背景。

完成后，对于红色div，您可以设置属性bottom:0;，使其保留在页面底部。

对于h1标签，这可能是一个解决方案：

position:fixed;
top: 50%;
left: 50%;
width:30em;
height:18em;
margin-top: -9em; /*set to a negative number 1/2 of your height*/
margin-left: -15em; /*set to a negative number 1/2 of your width*/