どのようにdivを含むdivの一番下にdivを配置することができますか?
<style>
.outside {
width: 200px;
height: 200px;
background-color: #EEE; /*to make it visible*/
}
.inside {
position: absolute;
bottom: 2px;
}
</style>
<div class="outside">
<div class="inside">inside</div>
</div>
このコードは、 "inside"というテキストをページの下部に配置します。
.outside {
width: 200px;
height: 200px;
background-color: #EEE; /*to make it visible*/
}
する必要があります
.outside {
position: relative;
width: 200px;
height: 200px;
background-color: #EEE; /*to make it visible*/
}
絶対配置では、DOM内で最も近い位置にある親が検索されます。定義されていない場合は、本文が使用されます。
position:relative
を.outside
に割り当て、次にposition:absolute; bottom:0;
をあなたの.inside
に割り当てます。
そのようです:
.outside {
position:relative;
}
.inside {
position: absolute;
bottom: 0;
}
position: relative
を.outside
に追加します。 ( https://developer.mozilla.org/en-US/docs/CSS/position )
相対的に配置されている要素は、ドキュメント内の通常の要素の流れの中にあると見なされます。対照的に、絶対に配置されている要素は流れから取り除かれ、他の要素を配置するときにスペースを取らない。絶対配置要素は、最も近い位置にある祖先に対して配置されます。配置された先祖が存在しない場合は、最初のコンテナが使用されます。
「初期コンテナ」は<body>
になりますが、上記を追加すると.outside
が配置されます。