「bottom: 0」のスティッキー配置が MDN の説明と異なる動作をするのはなぜですか?

スティッキー配置にbottom: 0を指定すると、MDNの説明と異なるのはなぜですか?

position:stickyプロパティはハイブリッド動作を導入します相対位置と固定位置の間。指定されたしきい値に達するまで相対位置を模倣し、しきい値に達すると固定位置に移行します。

ただし、bottom: 0 が設定されているコード スニペットでは、動作は実際の動作とは逆になっているように見えます。 MDNの記事で説明されています。要素は固定として開始され、スクロールしてしきい値を超えた後に相対に移行します。

この矛盾の背後にある理由は、MDN の定義の文言にあります。

「スティッキー配置はハイブリッドと考えることができます」固定的に配置された要素は、指定されたしきい値を超えるまでは相対的に配置されたものとして扱われ、その時点で境界に達するまでは固定されたものとして扱われます。 parent."

ここでのキーワードは、「指定されたしきい値を超えるまで」です。コードでは、ページが最初にレンダリングされるときに、要素はすでに指定されたしきい値 (ビューポートの下部) を超えています。したがって、bottom: 0 は、しきい値が相対から固定に移行する必要があることを示しているにもかかわらず、すぐに固定配置状態に入ります。

要約すると、スティッキー要素にbottom: 0 を指定すると、最初に固定が開始されます。すでにしきい値に達しており、要素がビューポートの下部を超えて上にスクロールバックされると相対に移行するためです。この動作は MDN の定義と一致していますが、使用されている言語がやや混乱を招く可能性があります。

以上が「bottom: 0」のスティッキー配置が MDN の説明と異なる動作をするのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。