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

オーバーフロー: 非表示で位置: スティッキーが機能しないのはなぜですか?

CSS では、position: Sticky プロパティにより要素を表示したままにすることができます。スクロール中、コンテナ要素がスクロールして見えなくなるところまで。この動作は、モバイル アプリケーションで一般的に見られる固定ヘッダーを模倣しています。

ただし、コンテナ要素に overflow: hidden プロパティが設定されている場合、position: Sticky 動作は観察されなくなります。これは、overflow: hidden プロパティがコンテナのサイズを制限し、スティッキー要素が表示領域の外に再配置されるのを防ぐために発生します。

なぜこれが起こるのか

オーバーフローの場合: hidden がコンテナに適用されると、基本的に境界を超えるコンテンツはクリップされます。これは、スティッキー要素がコンテナの表示領域の外側に配置されている場合でも、オーバーフロー: 非表示ルールによって事実上非表示になることを意味します。

最新の代替:

To余分なコンテンツをクリップする機能を維持しながら、オーバーフローしたコンテンツを含むコンテナーで望ましいスティッキー動作を実現するには、contain:paint の使用を検討してください。 property:

contain: paint;

contain: ペイントは、オーバーフローしたコンテンツを含む子要素のレンダリングをコンテナー内に制限します。これは効果的に overflow: hidden を模倣しつつ、position: Sticky プロパティの正しい機能を可能にします。

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