title: position responsive fixed button to div container css
body: <p>I want to position a button responsively at the right bottom corner. So far I have put the button fixed to the centered container.</p>
  
  <p><strong>The Problem</strong></p>
  
  <p>If at any time I stretch the page (up and down , or side ways up and down) it disappears/looses focus for a slight second.  </p>
  
  <p><strong>Expected:</strong></p>
  
  <p>I would like this yellow button to be vissible at all times, even if the browser is stretched.</p>
  
  <p><strong>Code:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    .container{
       margin:0 auto;
       max-width:480px;
       height: 50vh;
       width: 100%;
       text-align:center;
       background:blue;
        }
      .fixed_button{
      position: fixed;
      bottom: 10px;
      width: 70px;
      height: 20px;/*height: auto;*/
      margin-left: 405px;
      border: 0px solid #d6d6d6;
      z-index: 99;
      padding: 0;
      text-align: center;
      background: yellow; 
       }
       .spaces{
        width: 100%;
        height: 500px;
        border: 1px solid #000;
       }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div class="container"&gt;
    &lt;div class="spaces"&gt;&lt;/div&gt;
    &lt;div class="spaces"&gt;&lt;/div&gt;
    &lt;div class="spaces"&gt;&lt;/div&gt;
    &lt;div class="spaces"&gt;&lt;/div&gt;
    &lt;div class="spaces"&gt;&lt;/div&gt;
          &lt;div class="fixed_button"&gt;&lt;/div&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Also if you want to see the visibility effect, just open snippet , click <code>full page</code> and stretch your window around.</p>
  
  <p>Container:blue &amp; fixed button:yellow.</p>
  
  <p><a href="https://i.stack.imgur.com/R7iS4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/R7iS4.png" alt="yellow button responsive fixed to container"></a></p>
  
  <p>by the way, the container has a croll to load plugin, so it grows downwards anytime the user scrolls down the page, so <code>.container</code> growns and the button cant be positioned absolutely. </p>