html - 响应式图像，上面有文字，结果内容悬停在图像下方

Question

我需要一个带有文字的响应式图片(不是背景图片，因为我可能会用 slider 替换图片)。问题是，当我使用 absolute 时， slider 下方的内容会在大屏幕上的 slider 上向上移动。所以换句话说，我希望其上的响应图像和文本也显示为一个 block 。

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