Absolute positioned element on a scrollable parent
<p>I'm trying to have an child element (something like a toolbar) of a parent element to be positiond on its bottom edge. The bahavior should be the same as using position fixed for the browser view.</p>

<p>I'm using absolute position right now. Everyting is perfect until the parent needs to scroll its content. Then the toolbar moves along with the rest of the parent's content.</p>

<p>Could somebody explain me why the toolbar moves?
Is it possible to achieve that task without need any javascript?</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>* {
  box-sizing: border-box;
}

.container {
  position: relative;
  width: 100px;
  height: 150px;
  overflow-y: auto;
  border: 1px solid black;
}

.mock {
  height: 200px;
  background-color: red;
}

.tool-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background-color: blue;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  &lt;div class="mock"&gt;&lt;/div&gt;
  &lt;div class="tool-bar"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>