css - CSSを使用して要素を別の要素の下部に配置するにはどうすればよいですか?

Question

これを見てください：http://jsfiddle.net/unimous/88uqJ/

<div id="d1">
    <div id="d2">
</div>
</div>

#d1 {
    height: 3000px;
    background-color: red;
}

#d2 {
    background-color: green;
    height: 40px;
    width: 40px;
    position: absolute;
    bottom: 0px;
}

画面の下部ではなく、d1の下部にdiv d2を表示させたいです。

position: absoluteここで機能しないのはなぜですか？

Answer 1

position:relatived1 divに追加します

jsFiddle の例

絶対配置要素は、最も近い配置先祖に対して配置されます。