絶対的に配置された内部 DIV は、外部 DIV を絶対的に配置せずに、その親の「overflow: hidden」を尊重できますか?

位置が絶対的なネストされた DIV は、外側の DIV の絶対位置を指定せずにオーバーフロー非表示にできますか?

2 つの DIV がネストされているシナリオ、外側の DIV が通常に配置され、内側の DIV が絶対に配置されている場合、内側の DIV は、外側 DIV.

意図したレイアウトを乱す可能性がある外側 DIV の絶対位置決めに頼らずにこの問題を解決するには、次の点を考慮してください:

外側 DIV と絶対位置の相対位置内部 DIV の場合

外部 DIV を位置:相対として配置し、内部 DIV を次のように配置します。位置: 絶対。これにより、内部 DIV は親の相対的な位置を継承し、オーバーフローの非表示プロパティに従うことができます。

コード例:

#first {
    ...
    position: relative;
    overflow: hidden;
}

#second {
    ...
    position: absolute;
}

この構成では、内部の DIV は、 DIV は外側の DIV 内に絶対的に配置され、そのオーバーフローの隠蔽プロパティを尊重して、オーバーフローを効果的に隠します。 content.

注: 内部 DIV がテーブル セル (TD) から「拡張」する必要がある場合、この解決策は適切ではない可能性があります。

代替オプション

内部 DIV の相対位置がオプションではない場合は、CSS クリッピングの使用を検討してください。テクニック。外側の DIV のクリッピング パスを作成し、それを内側の DIV に適用します。これにより、オーバーフロー境界を尊重しながら、内部 DIV が外部 DIV の境界を超えて拡張できるようになります。

コード例:

#outer-container {
    position: relative;
    width: 200px;
    height: 200px;
}

#inner-element {
    width: 400px;
    height: 400px;
    clip-path: path("M0 0 L 200 0 L 200 200 L 0 200 Z");
}

以上が絶対的に配置された内部 DIV は、外部 DIV を絶対的に配置せずに、その親の「overflow: hidden」を尊重できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。