css-divを含むdivの下部に配置

118

含まれている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>

このコードは、ページの下部に「内側」のテキストを配置します。

css position

— nagy.zsolt.hun
ソース

.outsideニーズposition: relative;

— 命令

相対、はい、そして残念ながら、child-divコンテンツを保持するために必要な大きさを知りません。そのため、静的な値でない限り、元の質問に戻ります。1つのdivを別のdivの下部に配置する方法（暗黙：「すべてを壊すことなく」）。

— JosephK 2017

回答:

136

.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内で最も近い相対的に配置された親を探します。定義されていない場合は、本体を使用します。

— カール
ソース

ありがとう。理由を説明できますか？

— nagy.zsolt.hun 2013年

absolute最も近いrelative親を検索します。デフォルトでbodyはのdocumentです。そのため、親DOMオブジェクト（.outside）にプロパティがない場合は、bodyタグの下部に移動しrelativeます.inside。

「一つは、それが体を使用する定義されていない場合は、絶対に、DOMの中に最も近い比較的位置付け親のためのルックスを配置する。」あなただけの説明とても私にとって非常に！今、私は本当にCSSを理解し始めます。ありがとうございました！

— Simon Forsberg

Absoluteは実際には最も近い非デフォルト（=静的）に配置された祖先を検索します。また、直接の親である必要はありませんが、たとえば祖父母でもかまいません。

— mzwaal 2015年

これは一定の高さに依存します。これは非常に悪いです。フォント、フォントサイズ、パディング、マージン、および神の簡単な変更は、新しい高さを推測するために他に何を実験に要求するかを知っています。

— アンダーソン

に割り当ててposition:relativeから.outside、に割り当てposition:absolute; bottom:0;ます.inside。

そのようです：

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

— dsgriffin
ソース

これは、スティッキーフッターの基礎になるのではないでしょうか。

— ケードゴールト

位置は使用できません：絶対; 2番目のdivの場合。それが私の制限です。他のオプションを教えてもらえますか？

— Piyush Dholariya 2016年

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

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

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

— 爆発の丸薬
ソース