絶対に配置された子を収容できるように親 Div を拡張するにはどうすればよいですか?

絶対位置の子による親 Div の展開

CSS を使用する場合、デスクトップとモバイルの両方で要素を別の要素の前に配置する必要がある場合があります。デバイス。ただし、絶対配置ではフローから要素が削除され、他の要素によって無視されます。

このシナリオでは、次の 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 がその高さを無視するため、この構成は失敗します。親に対して overflow:hidden を設定したり、clearfix を使用したりしても効果はありません。

根本的な問題は、絶対位置の要素が親コンテナの高さの計算に考慮されないことです。したがって、絶対に配置された子の位置に基づいて親の高さを決定することはできません。

この問題に対処するには、2 つのオプションが利用可能です:

• 固定高さを使用する: child1 と child2 の両方に固定の高さを割り当て、親 div の高さが十分に対応できるようにします。
• JavaScript を使用する: JavaScript を使用して 2 つの div を動的に再配置し、望ましい視覚的な順序を維持し、親 div の高さがそれに応じて調整されるようにします。

以上が絶対に配置された子を収容できるように親 Div を拡張するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。