オーバーフロー:hidden_​​html/css_WEB-ITnose

私は当初、overflow:hidden で溢れている子要素をすべて非表示にできると考えていましたが、今日それが間違っていたことが分かりました。

overflow:hidden に関する最大の誤解: 高さと幅の少なくとも 1 つを持つコンテナに overflow:hidden が適用されている場合、コンテナ内のオーバーフローするコンテンツはクリップ (非表示) されます。

以下の条件が同時に満たされる場合は無効です:

1. overflow:hidden スタイルのブロック要素には、position:relative とposition:absolute がありません
2. 内部のオーバーフロー要素は、position を介して絶対的に配置されます:absolute

オーバーフローに関する CSS2.1 仕様のオンライン説明は次のとおりです:

原文

このプロパティは、ブロック コンテナー要素のコンテンツが要素のボックスをオーバーフローしたときにクリップされるかどうかを指定します。含まれるブロックがビューポートまたは要素の祖先である子孫要素 (およびそれぞれのコンテンツと子孫) を除く、要素のすべてのコンテンツ。

Translation

この属性 (オーバーフロー) は、ブロック要素コンテナーのコンテンツがいつオーバーフローするかを指定します。要素のボックス モデル 境界線をクリップするかどうか。これは、適用された要素のすべてのコンテンツのクリッピングに影響します。ただし、子孫要素の包含ブロックがビューポート全体 (通常、ブラウザーのコンテンツの表示領域を指し、body 要素として理解できます) またはコンテナの親要素 (オーバーフローが定義されている要素) である場合、影響を受けません。

誰もが「包含ブロック」についてよく知っています:

絶対的に配置された要素。その包含ブロックは、相対または絶対配置属性を持つ最も近い祖先要素です。第 1 レベルの祖先要素が一致しない場合は、その要素が一致します。包含ブロックは body 要素です。

これは、絶対に配置された要素が overflow:hidden によって非表示になるかどうかは、その要素を含むブロックの overflow:hidden に対する相対的な位置に依存することを意味します。

CSS2.1 仕様のセクション 11.1 には、より明確な説明があります:

元のテキスト

子孫ボックスは、部分的にボックスの外側に絶対的に配置されます。このようなボックスは、祖先のオーバーフロー プロパティによって常にクリップされるわけではありません。具体的には、それらは、それ自体とそれを含むブロックの間の祖先のオーバーフローによってクリップされません。

翻訳

部分的にコンテナの外側にある、絶対的に配置された子孫ブロック要素。このような要素がクリップされるかどうかは、オーバーフロー プロパティを定義する祖先コンテナーに常に依存するわけではありません。特に、要素自体とそのコンテナーを含むブロックの間の祖先コンテナー のオーバーフロー プロパティによってクリップされることはありません。

したがって、overflow:hidden は全能ではありません。そのすべての子要素を完全にトリミングしたい場合は、overflow:hidden を持つだけでなく、すべての子要素を含むブロックとしても機能する必要があります。