web-dev-qa-db-ja.com

css - divを、それを含むdivの下に配置する

どのように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"というテキストをページの下部に配置します。

cssposition
111
nagy.zsolt.hun
.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内で最も近い位置にある親が検索されます。定義されていない場合は、本文が使用されます。

129
Karl

position:relativeを.outsideに割り当て、次にposition:absolute; bottom:0;をあなたの.insideに割り当てます。

そのようです：

.outside {
    position:relative;
}
.inside {
    position: absolute;
    bottom: 0;
}
70
lifetimes

position: relativeを.outsideに追加します。 （ https://developer.mozilla.org/en-US/docs/CSS/position ）

相対的に配置されている要素は、ドキュメント内の通常の要素の流れの中にあると見なされます。対照的に、絶対に配置されている要素は流れから取り除かれ、他の要素を配置するときにスペースを取らない。絶対配置要素は、最も近い位置にある祖先に対して配置されます。配置された先祖が存在しない場合は、最初のコンテナが使用されます。

「初期コンテナ」は<body>になりますが、上記を追加すると.outsideが配置されます。

19
Explosion Pills