html - 另一个图像中的响应图像叠加

Question

我已经成功地在另一张图片上显示了一张图片，如下所示:

<div class="row">
    <div class="col-lg-6 col-md-6 col-sm-12">
        <div class="image-with-overlay">
            <div class="shop-now-overlay">
                <img src="img/btn_shop_now.png">
            </div>
            <img src="img/left_image.jpg"/>
        </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-12">
        <div class="image-with-overlay">
            <div class="shop-now-overlay">
                <img src="img/btn_shop_now.png">
            </div>
            <img src="img/right_image.jpg"/>
        </div>
    </div>
</div>

这就是我的样式表的样子:

.image-with-overlay {
  position: relative;
}
.image-with-overlay .shop-now-overlay {
  position: absolute;
  z-index: 10;
  bottom: 0;
  right: 0;
  padding-bottom: 30px;
  padding-right: 30px;
}

但我希望我的页面能够响应，当然，每次我将浏览器调整得更小并且图像显示在单个列 (col-sm-12) 上时，叠加按钮显示在外面图像并占用页面的宽度。关于如何限制图像覆盖仅环绕图像的任何想法，即使屏幕较小也是如此？

Answer 1

看起来 responsive.css 使它成为静态的!你能试试 !important 吗？我不会推荐这个，但检查也没有坏处。

.image-with-overlay {
    position: relative !important;

    .shop-now-overlay {
        position: absolute !important;
        z-index: 10;
        bottom: 0;
        right: 0;
        padding-bottom: 30px;
        padding-right: 30px;
    }
}