絶対に配置された内部 DIV が親の Overflow:hidden プロパティを尊重するようにするにはどうすればよいですか?

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

ジレンマ:

2 つのネストされた DIV があります: オーバーフローのある外側の DIV:非表示であり、内部 DIV は絶対的に配置されます。デフォルトでは、内側の DIV は外側の DIV のオーバーフロー動作に従いません。外側の DIV の位置を絶対位置に変更せずに、この動作を維持するにはどうすればよいですか?

解決策:

内側の DIV が外側の DIV を尊重するようにするにはoverflow プロパティ:

1. 外側の DIV の位置を次のように変更します。相対。
2. 内部 DIV の絶対位置を維持します。

例:

#outer {
  width: 200px;
  height: 200px;
  background-color: green;
  overflow: hidden;
  position: relative;  // Make outer DIV relative
}

#inner {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;  // Keep inner DIV absolute
  left: 250px;
  top: 250px;
}

追加メモ:

• 使用位置: 外側の相対DIV は、その表示やレイアウトには影響しません。
• オーバーフロー動作を尊重しながら、外側の DIV の境界を「エスケープ」するには、内側の DIV は、position:Absolute のままでなければなりません。
• 特定のケースの場合内部 DIV がテーブル セルから拡張される場合でも、解決策は変わりません。外側のテーブルのセルを相対に配置し、内側の DIV を絶対に配置することで、目的の効果が得られます。

以上が絶対に配置された内部 DIV が親の Overflow:hidden プロパティを尊重するようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。