带有文字的自适应图像，结果位于图像下方

Question

我需要一个响应式图片（不是背景图片，因为我可能会用滑块替换该图片），并在其上添加文字。 问题是，当我使用绝对值时，滑块下方的内容在大屏幕上的滑块上会向上移动。 所以换句话说，我也希望将响应图像和其上的文本显示为一个块。

的HTML

<div class="banner_container"> 
        <img src="img/banner_1.png"> 
    </div>

    <div class="col-md-12 top_banner_mobile">
        <div class="col-md-8"> 
            <div class="banner-title"><strong>WAKE UP IN BALI</strong></div>
        </div>
    </div>
</div>

的CSS

.banner_container img {
    width: 100%;
    position: absolute;
    display: block;
    overflow: auto;
}

.banner-title{
    font-size: 8rem;
    color: white;
    text-shadow: 0 1px gray, 1px 0 gray, -1px 0 gray ;
    margin: 60px 40px;
    display: block;
}

我应该怎么做才能解决这个问题？

Answer 1

检查我的演示

使用position:absolute和z-index 。

.banner-title {
    font-size: 8rem;
    color: white;
    text-shadow: 0 1px gray, 1px 0 gray, -1px 0 gray;
    margin: 60px 40px;
    display: block;
    position:absolute;
    z-index:100;
}