带有文本的响应图像，在下面生成的内容悬停在图像上

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

检查我的DEMO

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