css - 相対divをその絶対コンテンツにまたがらせる方法は?

Question

ここでの非常に基本的な質問ですが、何時間も私を困惑させてきました: 相対的に配置された div を絶対配置されたコンテンツにまたがらせるにはどうすればよいですか?

http://jsfiddle.net/X6ay2/10/

HTML

<div class="outer">
    <div class="inner"></div>
</div>

CSS:

.outer {
    display: inline-block;
    position: relative; 
    background: blue;
    height: 100px;
    padding: 20px;
}
.inner {
    position: absolute;
    width: 50px;
    height: 50px;
    background: red;
}

Answer 1

絶対配置された要素はドキュメントフローの外にあるため、実際には親に「属していない」ため、実際には直接できません。ただし、一種の回避策は、絶対位置の div を 100% 幅および left:0 に設定することです。これにより、強制的に親の幅まで拡張されます。

.outer {
    display: inline-block;
    position: relative; 
    background: blue;
    height: 100px;
    padding: 20px;
}
.inner {
    position: absolute;
    width: 100%;
    left: 0;
    height: 50px;
    background: red;
}

http://jsfiddle.net/X6ay2/14/

これに対する注意点は、内側の div にパディングがある場合、100% を超えて拡張されることです。これを止めるには、内側の div で border-box box-sizing プロパティを使用します。

.inner {
    padding: 10px;
    box-sizing: border-box;
    -moz-box-sizing:border-box;
}

http://jsfiddle.net/X6ay2/15/

Answer 2

ニーズに合わせて外側の幅を設定します。例には

 width:50px

http://jsfiddle.net/X6ay2/12/