Wrapping my head around position: absolute and position: relative

Wrapping my head around position: absolute and position: relative

I understand that if I wrap an outer div with a relative position around a
div with an absolute position, then the absolute positioning of the inner
div will be relative to the outer div (duh).
However when I do this:
<div class="outer">
<div class="inner"> </div>
</div>
CSS:
.outer {
margin: 0 auto;
padding: 20px;
width: 700px; }
.inner {
position: absolute;
text-decoration: none;
cursor: pointer;
bottom: 20px;
left: 5px;}
It makes the inner align with the browser window, not the relative div!
I'm very stumped on this simple concept, I've been able to do this sort of
thing before but I must be doing something wrong.
Here is the complete jsfiddle for you to see: http://jsfiddle.net/DDYUK/1/