なぜ `position: Sticky` と `bottom: 0` が一番下にくっつかないのでしょうか?

Bottom:0 が Position: Sticky で機能しない理由

position を使用して要素を親の一番下に配置しようとした場合: スティッキーおよびボトム: 0 の場合、この問題が発生する可能性があります。 Sticky は要素をコンテナの上部に効果的に保持できますが、下部では保持できません。

その理由は、position: Sticky の定義にあります。ドキュメントによると、固定的に配置された要素は、その要素を含むブロックが特定のしきい値に達するまで、相対的に配置されたものとして扱われます。ただし、それを含むブロックの反対側の端に遭遇すると「スタック」します。

提供されたコードでは、position: Sticky および Bottom: 0 を持つ要素は、その含まれるブロックの一番下に達したときにのみスタックします。 (この場合、ピンクのブロック) は、フロー ルートの反対側のエッジ (要素が配置されている場所) に到達します。上部の対応する要素と同様に、フロー ルート内の上部エッジに到達したときにのみ固定または粘着性になります。

ただし、粘着性要素の下部はすでにエッジにあるため、固定または粘着性要素を固定できる反対側のエッジはありません。に固執してしまう。その結果、要素は下部に固定できず、単に初期位置に留まります。

例として、ブロック要素のマージンを増やして画面の外側に配置します。ゆっくりスクロールすると、フロー ルート内の反対側 (上) 端に到達すると、粘着要素がピンクのブロックの下部に移動することがわかります。

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