title: How to fix an element within a bootstrap container?
body: <p>I have a fixed a button at the right of a bootstrap container.</p>
  
  <p>But in high resolution, the button moves outside of the bootstrap container as it is fixed relative to body, not container.</p>
  
  <p>Note: It must be fixed (not absolute) because I don't want it to scroll with window.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>   &lt;div class="body"&gt;
      &lt;h1&gt;Body&lt;/h1&gt;
        &lt;div class="container"&gt;
        &lt;h1&gt;Container&lt;/h1&gt;
          &lt;a href="#" class="fixed-btn"&gt;Enquire Now&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.fixed-btn {
    padding: 10px 20px;
    background: #000;
    color: #FFF !important;
    text-decoration: none !important;
    line-height: 30px;
    position: fixed;
    right: 70px;
    top: 50px;
  }
  
  .body {
    background: aquamarine;
    min-height: 1000px;
  }
  
  .container {
    background: antiquewhite;
    min-height: 1000px;
    max-width: 400px;
  }
  </code></pre>
  
  <p>Is it possible to make it fixed within a bootstrap container? so it would not move outside of the container.</p>
  
  <p>Look a live code at <a href="https://jsfiddle.net/Faisal_Alvi/wng7ekr5/" rel="nofollow noreferrer">JSFIDDLE</a>.</p>