title: Prevent scrolling for absolutely positioned div
body: <p>I am trying to implement a 'sticky' effect bar that opens at the bottom of a panel on a web page.
  The bar should pop up at the bottom of the housing panel and should stay there whenever the content scrolls.</p>
  
  <p>The panel in question has to be <code>position: absolute</code> to fit into the rest of the pages layout and has the <code>overflow</code> set to <code>auto</code> to allow its content to expand without effecting the main page. This panel then contains another sub-section of the site that gets populated using different templates. </p>
  
  <p>Each template does not know anything about it's container and vice versa, they are disconnected entities.</p>
  
  <p>The template I am trying to implement should have a bar that pops up that is fixed to the bottom of the main panel, it should not scroll along with the rest of the content. I have set it to <code>position: absolute</code> as well with <code>bottom: 0</code> which I hoped would be the solution. This renders fine when there is no overflow in the container but when there is, the bar will render at the bottom of the container until the container is scrolled, in which case; it will move up and look like the bar is floating.</p>
  
  <p>The following snippet shows a cut down version of the current implementation that is failing.
  <div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    height: 300px;
    width: 300px;
    background: red;
    overflow: auto;
    position: absolute;
    top: 0;
    left: 0;
  }
  .non-template {
    background: lightgreen;
  }
  .bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: lightblue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="non-template"&gt;
      This div contains other content that should scroll along with any extra content in the template below
    &lt;/div&gt;
  
    &lt;!-- This div is a generated through a template. The markup here must be rendered inside this div, it cannot be moved outside of it. --&gt;
    &lt;div class="template"&gt;
      &lt;p style="height: 500px;"&gt;Main template stuf&lt;/p&gt;
      &lt;div class="bar"&gt;i should not scroll&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have managed hack around to get exactly what I need by moving the bar to be outside of the template block and by moving the <code>overflow</code> setting to the template block but of course, this is not a solution for me since the template is generating the HTML for the bar in the first place.</p>
  
  <p>The following snippet shows this working.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    height: 300px;
    width: 300px;
    background: red;
    position: absolute;
    top: 0;
    left: 0;
  }
  .scrollable {
    overflow: auto;
    width: 100%;
    height: 100%;
  }
  .non-template {
    background: lightgreen;
  }
  .bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: lightblue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- The container no longer has any overflow --&gt;
  &lt;div class="container"&gt;
    &lt;!-- The bar has been moved to here --&gt;
    &lt;div class="bar"&gt;i should not scroll&lt;/div&gt;
  
    &lt;!-- Another wrapper has been introduced which has the overflow set to auto --&gt;
    &lt;div class="scrollable"&gt;
      &lt;div class="non-template"&gt;This div contains other content that should scroll along with any extra content in the template below&lt;/div&gt;
  
  
      &lt;div class="template"&gt;
        &lt;p style="height: 500px;"&gt;Main template stuf&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My question is how can I prevent the bar from scrolling without moving the templated HTML from it's current location? Is this possible at all?</p>