Boostrap: how to “stick” a button above an image when recalibrating

Question

I have an image in which I need to put on a button, the problem is that I don’t know how to place the button and automatically resize and place it when the browser size is reduced, right now I have a button in place, but when I change the size browser to reduce the size of the button, I tried to use percentages in css-buy, does not work, what can I do?

<div id="discover" class="container-fluid">
<div class="row-fluid"> 
  <div class="col-lg-12 col-sm-12 col-xs-12 col-md-12 withimg">
    <img id="discoveryour" src="img/x.png" class="img-responsive">
  </div>  
</div>
<div class="row-fluid"> 
  <div id="bttnimg" class="col-lg-12 col-sm-12 col-xs-12 col-md-12">
<form id="start" method="post" action="x.php">
<button class="btn-primary">text</button>
</form> 
</div>
</div>
</div> 

Css:

  .withimg {
  width: 100%;
  overflow:hidden;
  padding: 0px;
  margin: 0px;
 }

  #discover{
  position: relative;  
 }

#bttnimg{
float: left;
position: absolute;
left: 62%;
top: 25%;
max-width: 750px;

 }

Answer 1

Ah, the good old question "how to lay material over an adaptive image - responsibly" question.

, . , .

, :

HTML:

<div class="img-wrapper">
    <img class="img-responsive" src="http://lorempixel.com/output/people-q-c-1200-400-4.jpg">
    <div class="img-overlay">
      <button class="btn btn-md btn-success">Button</button>
    </div>
</div>

CSS:

.img-wrapper {
  position: relative;
 }

.img-responsive {
  width: 100%;
  height: auto;
}

.img-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}

.img-overlay:before {
  content: ' ';
  display: block;
  /* adjust 'height' to position overlay content vertically */
  height: 50%;
}

img-overlay:before , div img-overlay . 50% ( height: 50% , ).

jsfiddle

, . btn-responsive ( btn-md ). @media btn-responsive . - :

.btn-responsive {
  /* matches 'btn-md' */
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}

@media (max-width:760px) { 
    /* matches 'btn-xs' */
    .btn-responsive {
        padding: 1px 5px;
        font-size: 12px;
        line-height: 1.5;
        border-radius: 3px;
    }
}

.

Answer 2

, DIV? position: absolute . , , https://jsfiddle.net/1x1pjwk7/

Answer 3

, , . . , . . / , .