css - 私の立場が絶対的である理由親との関係で配置されていませんか?

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

.outerCSS プロパティが与えられないposition:relative

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

Answer 2

.outer div に適用しない場合はposition:relative;、デフォルトで .outer div になりますposition:static。絶対配置の div は、相対的に配置された最も近い親に対して配置されます。何もない場合は、ページ自体に対して相対的に配置されます。

Answer 3

ここでcss を更新する fiddle demo

私はあなたの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;}