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

絶対配置とオーバーフローの隠れた難問

ネストされた DIV を扱う場合、次のような場合に外側の DIV にオーバーフローの隠しプロパティを適用するのは困難になることがあります。絶対的な位置にあるわけではありません。これにより、オーバーフローの非表示動作を無視して、絶対的に配置される内部 DIV が生成される可能性があります。

次の HTML 構造を考えてみましょう。

<div>
<p>ここで、#first にはオーバーフローの非表示プロパティがあり、# 2 番目は絶対的な位置にあります。このシナリオでは、#second はオーバーフロー非表示制約を尊重しません。</p>
<p>#first を絶対位置に設定せずにこの問題を解決するには、次の解決策を検討してください:</p>
<ol>
<li>
<p>位置#first を相対的に:</p>
<pre class="brush:php;toolbar:false">#first {
  position: relative;
}

#first の位置を維持絶対的に:

#second {
  position: absolute;
}

この設定では、#first のオーバーフロー非表示プロパティに #second が準拠するようになります。これにより、内部 DIV がオーバーフロー制約を遵守しながら、目的のレイアウトを維持できます。