響應圖像疊加在另一個圖像中

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

Answer 2

嘗試刪除padding元素，並嘗試使用left和right : 30px來處理位置right : 30px

.shop-now-overlay {
        position: absolute;
        z-index: 10;
        bottom: 0;
        right: 0;        
}