css - 为什么我的位置是:absolute not positioned in relation to its parent?

Question

我明白，如果我将一个具有相对位置的外部 div 包裹在一个具有绝对位置的 div 周围，那么内部 div 的绝对定位将相对于外部 div (duh)。

但是当我这样做时:

<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;}

它使内部与浏览器窗口对齐，而不是相对的 div!我对这个简单的概念感到很困惑，我以前能够做这种事情，但我一定是做错了什么。

这是供您查看的完整 jsfiddle:http://jsfiddle.net/DDYUK/1/

Answer 1

.outer 从未被赋予 CSS 属性 position:relative

.outer { 
    position: relative;
    margin: 0 auto; 
    padding: 20px; 
    width: 700px; 
}