スティッキー・イン・ポジションの使い方

位置にスティッキーを使用する手順: 1. 要素に「position: Sticky」属性を追加します; 2. スクロール ボックスを使用して、最も近い祖先要素を基準にして配置される要素を指定します。 、right、bottom、または left プロパティを使用してオフセット値を設定します。

# このチュートリアルのオペレーティング システム: Windows 10 システム、Dell G3 コンピューター。

position: Sticky は、スクロール中に要素を特定の位置に留まることを可能にする CSS の位​​置決めプロパティです。要素が指定されたオフセットまでスクロールされると、その要素は「固定配置」され、別の指定されたオフセットまでスクロールされるまでその位置に留まります。

position: Sticky を使用するには、次の手順が必要です:

1. Position: Sticky 属性を要素に追加します。

2. 指定された要素は、スクロール ボックスを使用して最も近い祖先要素を基準にして配置されます。top、right、bottom、または left 属性を使用してオフセット値を設定できます。

たとえば、position: Sticky:

.container {
  height: 400px;
  overflow: auto;
}
.sticky-element {
  position: sticky;
  top: 20px;
  background-color: #f1f1f1;
  padding: 10px;
}

<div class="container">
  <div class="sticky-element">
    这是一个粘性元素
  </div>
  <!-- 其他内容 -->
</div>

を使用した例を次に示します。

上記の例では、.sticky-element 要素は、ページの上部から 20px の距離までスクロールしても残ります。その位置に .container 要素を追加します。

position: Sticky 属性は一部の古いバージョンのブラウザではサポートされていない可能性があるため、使用する場合は互換性テストが必要であることに注意してください。

以上がスティッキー・イン・ポジションの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。