如何修复图片右侧图标的位置

Question

  PS：我对CSS很陌生，我正在努力工作   移动响应式用户界面，所以如果有什么傻话请饶恕我！

我有一张图片，在图片左侧显示文字，右边显示图标。但是，我无法修复图标的位置。 不断变化。以下是供参考的图片。

以下是我的代码

＆＃13;

＆＃13;

.banner-image {
  height: 140px;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.text-over-image {
  z-index: 100;
  position: absolute;
  color: white;
  margin-top: -180px;
}

.pull-right {
  float: right!important;
}

.mt-45 {
  margin-top: -45px;
}

.mr-25 {
  margin-right: -25px;
}

＆＃13;

<div>
  <img class="banner-image" src="/assets/productionBanner@3x.png" alt="Productionbanner@3x">
  <div class="text-over-image">
    <h4 class="title-font">Speed Management</h4>
    <h5>- Exploring 3 interactions that creates great impact</h5>
    <a href="/user_profiles/2/user_notes/new?book_summary_id=3">
      <img height="15" width="15" class="mt-45 pull-right mr-25" src="/assets/Add@2x.png" alt="Add@2x">
    </a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

非常感谢任何解决问题的想法和建议！

Answer 1

经过一番研究，我发现了这个问题。问题是图标被放置在div中，其中上下文是动态的并且它们的位置是固定的。所以我把图标移出了div并调整了css并且它有效！这就是我想出来的

<div>
  <img class="banner-image" src="/assets/productionBanner@3x.png" alt="Productionbanner@3x">
  <a href="/user_profiles/2/user_notes/new?book_summary_id=1">
    <img height="15" width="15" class="mt-125 pull-right add-note" src="/assets/Add@2x.png" alt="Add@2x">
  </a>  
  <div class="text-over-image">
    <h4 class="title-font">The 5 Appreciation Languages</h4>
    <h5>- Learn how to lead, inspire and engage through appreciation</h5> 
  </div>
</div>

.banner-image {
  height: 140px;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.text-over-image {
  z-index: 100;
  position: absolute;
  color: white;
  margin-top: -180px;
}

.pull-right {
  float: right!important;
}

.mt-125 {
  margin-top: -125px;
}
.add-note{
  position: absolute;
  right: 5%
}