「bottom: 0」を使用したスティッキー配置が MDN ドキュメントと比較して逆の動作を示すのはなぜですか?

スティッキー ポジショニングの反対の動作を理解する

MDN ドキュメントでは、スティッキー ポジショニングは相対ポジショニングと固定ポジショニングのハイブリッドとして説明されています。要素は、しきい値を超えるまでは相対的に位置決めされた要素のように動作し、しきい値を超えると固定位置要素として動作します。ただし、スティッキー配置にbottom: 0を指定すると動作が逆になるようです。

スティッキー配置の仕組み

MDNによれば、スティッキー配置要素は以下のように動作します。 2 つの状態:

1. 相対モード: 要素は、コンテナまたは静的な親のフローに対して相対的に配置されます。
2. 固定モード: 要素はビューポートを基準にして配置され、固定位置に残ります。

これらの状態間の遷移は、指定されたしきい値を超えると発生します。

シナリオの説明

以下の例を考えます。

<div class="container">
  <header></header>
  <main></main>
  <footer>
    <div class="footer"></div>
  </footer>
</div>

body {
  margin: 0;
}

.container {
  display: flex;
  height: 100vh;
}

.container>* {
  width: 100%;
}

footer {
  background: #faa;
  position: sticky;
  bottom: 0;
}

.footer {
  background: #aff;
  height: 100vh;
}

フッター要素にbottom:0を指定した場合、閾値（下端）が低いため、最初は固定状態で開始されます。ビューポート）を最初から超えています。下にスクロールしてもしきい値を超えているため、フッターは固定位置に残ります。

ただし、フッター要素がしきい値 (ビューポートの下部) に達すると、相対モードに移行します。しきい値を超えなくなりました。これは、要素がビューポートの下部から 0px 未満のときに遷移が発生する必要があると述べている MDN ドキュメントの提案とは逆です。

言語の誤解

この曖昧さは、MDN ドキュメントで使用されている言語に起因します。 「閾値を超えるまで」という記述は、相対状態がスティッキー位置決めの開始状態であることを意味します。ただし、常にそうとは限りません。要素がスティッキーと宣言されたときにすでにしきい値を超えている場合、要素は固定状態で開始されます。

結論

スティッキー配置と遷移の 2 つの状態を理解する効果的に使用するには、それらの間で発生することが重要です。 MDN ドキュメントで説明されている動作は、最初にしきい値を超えたときに元に戻される可能性があり、その結果、予想とは異なる動作が発生します。

以上が「bottom: 0」を使用したスティッキー配置が MDN ドキュメントと比較して逆の動作を示すのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。