Position:Sticky と Position:Fixed をいつ使用する必要がありますか?

position:sticky とposition:fixed の違いを明らかにする

CSS の位​​置決めプロパティ間のニュアンスを理解することは、初心者にとってはわかりにくいかもしれません。この記事では、position:sticky とposition:fixed の微妙な違いを詳しく掘り下げ、CSS の能力を高めるためのそれぞれの機能を明確にします。

position:fixed とposition:sticky

position:fixed

• 要素をコンテナまたはビューポート内の特定の位置にロックします。
• コンテナのスクロールに関係なく、固定されたままになります。

position:sticky

• 最初は、position:relative のように動作しますが、要素のフローには影響しません。
• 指定されたオフセットを超えてスクロールすると、position:fixed に移行し、要素をその位置に「固定」します。
• 最初の位置に向かってスクロールバックすると、position:relative に戻ります。

例

次の HTML と CSS を考えてみましょう:

<code class="html"><div class="container">
  <div class="sticky-element">Sticky Element</div>
  <div class="fixed-element">Fixed Element</div>
</div></code>

<code class="css">.container {
  height: 100vh; /* Set the container to full viewport height */
  overflow-y: scroll; /* Enable vertical scrolling within the container */
}

.sticky-element {
  position: sticky;
  top: 10px; /* Specifies the offset from the top before stickiness applies */
  width: 200px;
  height: 200px;
  background-color: blue;
}

.fixed-element {
  position: fixed;
  top: 0; /* Sets the fixed position from the top of the viewport */
  width: 200px;
  height: 200px;
  background-color: red;
}</code>

動作:

スクロールすると、スティッキー要素はスクロールされるまでその位置に残ります。ビューポートの上部に到達し、その時点で固定要素のように上部に固定されます。一方、固定要素は、コンテナーのスクロールに関係なく、初期位置に固定されたままになります。

以上がPosition:Sticky と Position:Fixed をいつ使用する必要がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。