title: make a responsive button that stays in the same position on top of an image
body: <p>I want to put a button on top of a responsive image but not in the center, and I want it to stay at the same position on top of another button in the image.
  Here is my code on <a href="https://jsfiddle.net/rvr21jq6/" rel="nofollow noreferrer">jsfiddle</a>:</p>
  
  <p>This is the HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
  
    &lt;div class="img"&gt;
        &lt;img src="http://www.playful.ma/wp-content/uploads/2017/02/img.png" class="0"&gt;
    &lt;/div&gt;
  
    &lt;div class="overlay"&gt;
     &lt;h4&gt;My Button&lt;/h4&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>this is the css</p>
  
  <pre><code>.container{
  
    width: 100%;
  
  }
  
  .overlay{
    position:absolute;
    top:70%;
    left:60%;
    padding:10px;
    background:white;
    border-radius:10px;
  }
  
  
  .img{
    position:relative;
    width:100%;
    min-width: 100%;
  }
  </code></pre>
  
  <p>I want the <code>.overlay</code> div to stay in the same position on top of the blue button in the image when resizing the browser.
  thank you.</p>