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

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

ネストされた DIV を扱う場合、範囲内の内部 DIV の表示を制御するのが難しい場合があります。特にオーバーフロー非表示のようなプロパティを使用する場合。この質問では、外側の DIV が絶対的に配置されておらず、絶対的に配置されている内側の DIV が外側の DIV のオーバーフロー非表示ディレクティブを無視するという特定のシナリオを検討します。

この問題に対処するために、提案された解決策には配置を変更することが含まれます。外側の DIV を相対的に配置し、内側の DIV の絶対的な位置を維持します。その仕組みは次のとおりです:

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

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

外側の DIV をposition:relativeに設定すると、その要素内に新しい座標系が確立され、内側の DIV の位置の参照点として機能します。これにより、外部 DIV のオーバーフロー非表示制約を遵守しながら、内部 DIV を外部 DIV に固定したままにすることができます。この構成では、内側の DIV のコンテンツは外側の DIV の境界内でクリップされます。

あるいは、内側の DIV に Position:fixed を使用することも検討できます。これにより、ビューポートを基準にして位置が固定されます。外側の DIV よりも。このアプローチにより、特に外部 DIV の境界外に配置する必要がある場合に、内部 DIV の配置をより詳細に制御できる可能性があります。

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