「overflow: hidden」が「position: Sticky」の動作を壊すのはなぜですか?

overflow:hidden がposition:sticky の動作に干渉する理由

Web 開発では、position:sticky を使用すると、ユーザーが操作している間、要素が表示され、コンテナ内に配置されたままになります。親コンテナまたはビューポートをスクロールします。ただし、コンテナに overflow:hidden が適用されている場合、position:sticky が意図したとおりに動作しない可能性があります。

元の問題:

次の HTML コードを考えてみましょう:

<div class="parent">
  <div class="sticky">
    ...
  </div>
</div>

スティッキー要素は表示されたままとなり、ユーザーとして親 div 内に配置されます。

オーバーフローの問題:

親 div に overflow:hidden を追加すると、スティッキー要素はコンテナーの上部にくっつかなくなり、スクロールするようになります。からview.

<div class="parent">
  <div class="sticky">
    ...
  </div>
</div>

原因:

overflow:hidden は、コンテナの境界を越えるコンテンツを非表示にします。これには、スティッキー要素がコンテナの表示領域の外に配置されている場合も含まれます。

解決策:

overflow:hidden がposition:sticky と干渉しないようにするには、次のようにします。 2 つのオプション:

• 最新のテクニックを使用:この質問の最初の投稿では、CSS が進化して contains:paint を導入しました。親コンテナに contains: ペイントを設定すると、オーバーフローしたコンテンツがエスケープされるのを防ぎ、スティッキー要素が表示され、正しく配置されたままになるようにすることができます。

.parent {
  contain: paint;
}

• オーバーフロー プロパティの調整: あるいは、オーバーフロー プロパティを非表示ではなく自動またはスクロールに設定することもできます。これにより、コンテンツがコンテナの境界を越えて拡張できるようになり、スティッキー要素が表示されたままになります。

.parent {
  overflow: auto;
  /* or */
  overflow: scroll;
}

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