私はCSSが初めてなので、ドキュメントを理解するのはかなり困難でした。誰かがposition:sticky
とposition:fixed
の実際の違いを説明できますか?私も例に感謝します。
https://developer.mozilla.org/en-US/docs/Web/CSS/position および他のいくつかの記事を読み終えましたが、まだわかりません。
position: fixed
は常に、スクロールコンテナまたはビューポート内の特定の位置に要素を固定します。コンテナをどのようにスクロールしても、コンテナはまったく同じ位置にとどまり、コンテナ内の他の要素のフローには影響しません。
特定の詳細に進むことなく、position: sticky
は基本的に要素が特定のオフセットを超えてスクロールされるまでposition: relative
のように動作し、その場合、要素はposition: fixed
に変わり、要素がビューの外にスクロールされるのではなく、位置。最終的に、元の位置に向かってスクロールして戻り、スタックが解除されます。少なくとも、それは理論的にそれを理解する方法です。
詳細を避けたいのは、position: sticky
が真新しく、実験的(リンク先のドキュメントに記載)であり、まだ確定していないためです。上記で述べたことでさえ、近い将来に変わる可能性があります。とにかくposition: sticky
を使用することはできません(これは来年中に変更されることを願っています)。
Mozillaは最近position: sticky
here の実装を発表しました。それは非常に価値があります。
わかりやすくするために、この自明の例を参照してください。 [〜#〜] codepen [〜#〜]
固定位置:
固定位置の要素は、ビューポートまたはブラウザウィンドウ自体に対して表示されます。ページがスクロールされても、常に同じ場所にとどまります。
ページ内の他の要素のフローには影響しません。つまり、特定のスペースを占有しません(position: absolute
)。
他のコンテナ(相対/絶対位置の有無にかかわらず)内で定義されている場合でも、そのコンテナではなくブラウザに対して配置されます。 (ここではposition: absolute
)。
スティッキーポジション:
スティッキー位置を持つ要素は、ユーザーのスクロール位置に基づいて配置されます。 @ Boltclock で述べたように、要素が特定のオフセットを超えてスクロールされるまで、それは基本的にposition:relativeのように動作します。スクロールバックすると、以前の(相対)位置に戻ります。
ページ内の他の要素のフローに影響を与えます。つまり、ページ上の特定のスペースを占有します(position: relative
)。
コンテナ内で定義されている場合、そのコンテナに対して配置されます。コンテナにオーバーフロー(スクロール)がある場合、スクロールオフセットに応じて、position:fixedに変わります。
そのため、コンテナ内で固定機能を実現する場合は、スティッキーを使用します。