How to fix the position of the icon on the right over the image

PS: I'm very new to CSS and I'm trying my head around to work on a mobile responsive UI, so please spare me if anything silly!

I have an image, to the left of the image I'm showing a text and to the right I'm showing an Icon. However I'm unable to fix the position of the Icon. It keeps changing. Below are the images for the reference.

The one which is working

The one which is not working

Below is my code

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

Any thoughts and suggestions to solve the problem are very much appreciated!

1 answer

  • answered 2017-10-11 12:11 Pavan

    After some research, I've figured out the issue. The issue is the icon is placed inside the div where the context is dynamic and their position is fixed. So I moved the icon out of the div and tweaked the css and it worked! This is what I came up with

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