絶対に配置された Div は親コンテナの高さにどのような影響を与えるのでしょうか?

親の高さに対する絶対配置 Div の影響

CSS を使用する場合、要素の配置が周囲の要素にどのような影響を与えるかを考慮することが重要です。一般的な課題の 1 つは、絶対に配置された div が親コンテナ内の他の要素を無視しないようにすることです。

次の HTML および CSS コードを考えてみましょう。

<div>

parent { position: relative; width: 100%; }
child1 { width: auto; margin-left: 160px; }
child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }

目標は次のとおりです。特にナビゲーションが下部にある必要があるモバイルデバイスでは、child2 を child1 の前に配置します。ただし、child2 には動的な高さがあるため、親 div に固定の高さを設定することはできません。

残念ながら、絶対に配置された要素はフローから削除されるため、親内の他の要素によって無視されます。容器。親 div で overflow:hidden を設定したり、Clearfix を使用しても役に立ちません。

解決策

問題文で認識されているように、解決策は絶対に次のことを理解することにあります。配置された要素はフローから削除されます。したがって、絶対に配置された要素に基づいて親の高さを設定することはできません。

考慮すべきオプション:

• 固定高さ: 適切な高さを確保するために、両方の子要素に固定の高さを割り当てます。レイアウト。
• JavaScript: JavaScript を使用して、child2 の高さに基づいて div の位置を動的に調整します。
• CSS フレックスボックスまたはグリッド レイアウト: これら新しい CSS テクニックを使用すると、絶対値を使用せずに、親コンテナ内の HTML 要素の視覚的な順序を逆にすることができます。位置決め。

以上が絶対に配置された Div は親コンテナの高さにどのような影響を与えるのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。