Absolute positioned element on a scrollable parent - html

Question

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.
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.
Could somebody explain me why the toolbar moves?
Is it possible to achieve that task without need any javascript?
* {
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;
}
<div class="container">
<div class="mock"></div>
<div class="tool-bar"></div>
</div>

Answer 1

The toolbar is inside the scrollable area, that's why it scrolled. Try this code:
HTML
<div class="container">
<div class="scroll">
<div class="mock"></div>
</div>
<div class="tool-bar"></div>
</div>
CSS
div.scroll { /* style of .container to scroll */ }

Answer 2

I have found an interesting fiddle that may help you. They are using position:fixed and the divs are not nested:
http://jsfiddle.net/b2jz1yvr/
<div class="fixedContainer">
This is experimental
</div>
<div class="otherContainer"></div>
.fixedContainer {
background-color:#ddd;
position: fixed;
padding: 2em;
left: 50%;
top: 0%;
transform: translateX(-50%);
}
.otherContainer {
height:1000px;
background-color:#bbb
}