位置の違い：粘着性と位置：固定？

Question

私はCSSに慣れていないので、ドキュメントはかなり分かりませんでした。だから誰も位置の実際の違いを説明してください：粘着性と位置：固定？私はまた、例を感謝します。

https://developer.mozilla.org/en-US/docs/Web/CSS/positionと他のいくつかの記事を読んだが、まだそれは得られない。

Answer 1

position: fixedは常に、要素をそのスクロールコンテナまたはビューポート内のある位置に固定します。どのようにコンテナをスクロールしても、コンテナ内の他の要素のフローには影響しません。要素は、その位置を「スティック」の代わりのビューの外にスクロールされる要素を引き起こし、それはposition: fixedになり、その場合、特定のオフセットを超えてスクロールされるまでの具体的な詳細に行くことなく

は、position: stickyは基本的position: relativeのように作用します。それは最終的に元の位置に向かってスクロールバックされると、元に戻ってきません。少なくとも、それは私が理論でそれを理解する方法です。

position: stickyは新品で実験的です（リンク先のドキュメントに表示されているように）、まだ完成していないためです。私が上に述べたことさえも近い将来変わるかもしれません。まだposition: stickyを使用することはできません（うまくいけば、これは翌年に変更されます）。

Mozillaは最近、position: stickyhereの実装を発表しました。それは時計の価値が高いです。

Answer 2

固定位置：

1. 固定位置を持つ要素は、ビューポートまたはブラウザウィンドウ自体に対して表示されます。ページがスクロールされても常に同じ場所にとどまります。

2. ページ内の他の要素のフローに影響しません。すなわち、特定のスペースを占有しません（ちょうどposition: absoluteのように）。

3. 他のコンテナ内に定義されている場合（divは相対/絶対位置があるかどうかにかかわらず）、コンテナではなくブラウザに対して配置されます。 （ここではposition: absoluteと異なります）。

スティッキーポジション：

1. スティッキー位置を持つ要素がユーザのスクロール位置に基づいて配置されています。上記の@Boltclockは、基本的にposition：relativeのように動作し、要素が特定のオフセットを超えてスクロールされるまで、position：fixedになります。スクロールバックすると、以前の（相対）位置に戻ります。

2. ページ内の他の要素のフローに影響します。すなわち、ページ上の特定の領域を占有します（position: relativeのように）。

3. 一部のコンテナ内で定義されている場合は、そのコンテナに対して配置されます。コンテナにオーバーフロー（スクロール）がある場合、スクロールオフセットに応じてposition：fixedに変わります。

したがって固定機能を実現したいが、コンテナ内にある場合は、粘着性のあるものを使用してください。

説明を分かりやすくするために、この自己説明的な例を参照してください。 https://codepen.io/nyctophiliac/pen/xpmpyp