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

Question

据我了解，如果我将具有相对位置的外部 div 包裹在具有绝对位置的 div 周围，则内部 div 的绝对定位将相对于外部 div (废话)。

但是当我这样做时:

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