css - 为什么我的立场：绝对没有相对于其父定位？

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

Answer 2

如果你不申请position:relative;.outer div，它将默认为 .outer position:static。绝对定位的 div 将相对于相对定位的最近的父级定位。如果没有，它将相对于页面本身定位。

Answer 3

在此处更新 css小提琴演示

我在你的 jsfiddle 中更新

在外部 div 中使用相对

.twitter-box {
  margin: 0 auto;
    position:relative;
  padding: 20px;
  width: 700px; }

  .twitter-box p {
    text-decoration: none;
    display: inline;
    position: absolute;
    margin-top: 69px; }

  .twitter-box img {
    height: 150px;
    width: 150px;
    text-align: center;
    margin: 0 auto; }

  .twit {
    position: absolute;
    text-decoration: none;
    cursor: pointer; 
    bottom: 20px;
    left: 5px;}