`position: Sticky` と `bottom: 0` が MDN の説明と反対の動作をするのはなぜですか?

position:sticky withbottom:0の逆の動作

position:stickywithbottom:0を指定した場合、定義と異なる動作をするMDN によって提供されます。要素がしきい値を超えて固定されるまで、最初は相対的に配置されたものとして扱われる説明とは異なり、bottom: 0 を指定すると逆のことが起こります。

提供されたコード例では、

<footer>
  <div class="footer"></div>
</footer>

footer {
  position: sticky;
  bottom: 0;
}

MDN では、フッター要素がビューポートの下部から 0px 未満に移動するまで相対的に配置する必要があると述べています。ただし、観察される動作は逆です:

• 下にスクロールする場合: フッターは固定位置で開始され、フッターの下部が下から 0px に達すると相対位置に配置されます。
• 上にスクロールする場合: フッターは相対的な位置から開始され、下に移動すると固定位置になります。フッターの部分がビューポートの下部から 0px を超えて移動します。

反対の動作の理由

この動作を理解する鍵は、次の文言にあります。 MDN の定義: 「指定されたしきい値に達するまで相対位置要素として扱われます」 "

これは、初期位置が HTML 構造と指定されたしきい値までの距離によって決定されることを意味します。 Bottom: 0 の場合、ページが読み込まれたときにフッターはすでにビューポートの下部にあります。このように、すでに閾値（下から0px）を超えているので「固定」の状態で開始されます。

結論

そのため、position:stickyを指定する場合は、 Bottom: 0 の場合、要素は最初は固定位置に設定され、要素がビューポートの下部を通過すると相対位置に移行します。この動作は、HTML 構造と指定されたしきい値への近さによって初期位置が決定されるため、MDN ドキュメントで説明されている動作とは反対です。

以上が`position: Sticky` と `bottom: 0` が MDN の説明と反対の動作をするのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。