粘着性のある底部要素が粘着しないのはなぜですか?

スティッキー位置とその動作

CSS の位​​置決めを使用する場合、'position: Sticky;'プロパティは独特の動作を提供します。これにより、要素が特定のしきい値に達するまで、コンテナ内で固定されたままになります。よくある誤解の 1 つは、'bottom: 0' の使用に関係しています。

問題:

提供されているサンプル コードでは、ピンクのブロックには 'position' を持つ青色のブロックが含まれています。 ：粘着性。下:0'。ただし、青いブロックはコンテナの底にくっついていないように見えます。

解決策:

驚くべきことに、コードは正しく動作しています。 CSS の「スティッキー」動作の定義では、次のように説明されています。

「スティッキー配置された要素は、その要素を含むブロックがフロー ルート内の指定されたしきい値を超えるまで、相対的に配置されたままになります。」

この場合、青このブロックは、ユーザーがピンクのブロックがビューポートの下部に重なるまでページをスクロールした場合にのみ固定されます。

実験的デモ:

より明白な効果を作成するには、ピンクのブロックに大きなマージントップ値を割り当て、ゆっくりスクロールしながら観察します。ピンクのブロックがページの表示領域の一番下に到達すると、青いブロックが一番下にくっつき始めます。

CSS の「スティッキー」機能を理解することで、CSS の「スティッキー」機能を効果的に使用して、調整や調整を行うより動的なレイアウトを作成できます。スクロール操作全体を通じて表示されたままになります。

以上が粘着性のある底部要素が粘着しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。