なぜ `overflow:hidden` が `position:sticky` を壊すのでしょうか?

overflow:hidden の理由position:sticky が機能しないようにする

position:sticky により、別の位置決めされた要素に出会うまで要素は固定されたままになります (ヘッダーなど)、その時点でその要素に対して静的になります。ただし、スティッキー要素を含むコンテナに overflow:hidden を適用すると、この動作が中断される可能性があります。

従来の CSS では、要素のコンテンツが親コンテナからオーバーフローすると、コンテンツを収容するためにコンテナの高さが増加します。この展開は、スティッキー要素など、コンテナ内の他の要素の位置に影響を与える可能性があります。

overflow:hidden がコンテナに適用されると、コンテナの高さは変更されません。これは、スティッキー要素のコンテンツがそのコンテナからオーバーフローした場合、スティッキー要素はコンテナと一緒に移動できないことを意味します。元の位置に留まり、position:sticky が機能していないように見えます。

この問題に対処するには、オーバーフローするコンテンツを非表示にするときに、overflow:hidden の代わりに contains:paint を使用することをお勧めします。 contains: ペイントは、オーバーフローがスティッキー要素を含むコンテナ内の他の要素のレイアウトに影響を与えるのを防ぎます。

以上がなぜ `overflow:hidden` が `position:sticky` を壊すのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。