title: Add Button on top of "img-responsive" div with bootstrap
body: <p>In my webpage, I've created a div and added the class "img-responsive" to it. It works extremely well and scales perfectly. However, I need to add a button on top of it and the only way I have done that so far is using the CSS property "position:absolute" and defining it's position. That does work, but when I resize my browser, the button will not scale with the webpage and is hidden on smaller screens. How can I fix this?</p>
  
  <p>Here's the image of what the header of my page looks like: <a href="http://postimg.org/image/xdols29nn/" rel="nofollow">http://postimg.org/image/xdols29nn/</a></p>
  
  <p>This is what my div looks like: </p>
  
  <pre><code>&lt;div style="position:relative;" class="img-responsive" &gt;
          &lt;img src="images/mac2.png" width="1440" class="img-responsive" &gt;
              &lt;div&gt;
  
                      &lt;input style="position:absolute; left: 1130px; top:35px;"type="button" value="Button" href="#sidr" id="simple-menu"&gt;
  
              &lt;/div&gt;
  
      &lt;/div&gt;
  </code></pre>