外側の DIV が相対的に配置されていない限り、絶対に配置された内側の DIV では Overflow:hidden が機能しないのはなぜですか?

オーバーフローの非表示と絶対配置

ネストされた DIV を含むシナリオで、外側の DIV にオーバーフロー: 隠しプロパティと内側の DIV がある場合が絶対的に配置されている場合、内側の DIV は外側の DIV のオーバーフロー制約に従わない可能性があります。これは、外側の DIV が完全に配置されていない場合に発生します。外側の DIV を Position: ABS に変更すると、レイアウト全体が混乱する可能性があります。

テーブル セル内の内側の DIV の適切な位置を維持しながらこの問題に対処するには、別のアプローチを使用できます。

1. 外側の DIV を位置:相対に設定します。これにより、内部 DIV の新しい座標系が確立されます。
2. 内部 DIV の位置をposition:Absoluteに変更します。これにより、内側の DIV が最も近い位置にある祖先 (この場合は外側の DIV) を基準にして配置されます。

例:

#first {
    width: 200px;
    height: 200px;
    background-color: green;
    position: relative;
}

#second {
    width: 50px;
    height: 400px;
    background-color: red;
    position: absolute;
    left: 0px;
    top: 0px;
}

この調整により、外側の DIV の overflow: hidden プロパティが内側の DIV を適切に制約し、その内容が境界を越えて拡張されるのを防ぐようになりました。外側の DIV。さらに、このソリューションでは、意図したとおり、内部 DIV をテーブル セルの外側に拡張することができます。

以上が外側の DIV が相対的に配置されていない限り、絶対に配置された内側の DIV では Overflow:hidden が機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。