CSSで固定位置を設定する方法

CSS でスティッキー位置を設定する方法: CSS セレクターに [position:sticky] を直接記述するだけです。スティッキー配置は、相対配置と固定配置のハイブリッドと考えることができ、要素は特定のしきい値を超えるまで相対的に配置され、その後固定されます。

このチュートリアルの動作環境: Windows 10 システム、CSS3 バージョンこの方法は、すべてのブランドのコンピューターに適しています。

(学習ビデオ共有: css ビデオ チュートリアル)

CSS で固定位置を設定する方法:

CSS での選択コンテナに直接position:stickyを書くだけです。

スティッキー ポジショニングは、相対ポジショニングと固定ポジショニングのハイブリッドとして考えることができます。要素は特定のしきい値を超えるまでは相対的に配置され、その後は固定的に配置されます。この特定のしきい値は、上、右、下、左のいずれかを指します。つまり、スティッキー配置は、上、右、下、左の 4 つのしきい値のいずれかを指定することによってのみ有効になります。それ以外の場合、動作は相対位置決めと同じです。

スティッキー ポジショニングには「フロー ボックス」という概念があり、スティッキー ポジショニング要素の最も近いスクロール可能な要素 (オーバーフロー属性値が表示されない要素) のサイズ ボックスを指します。スクロール可能な要素はなく、ブラウザ ウィンドウ ボックスを表します。

CSS セレクターに Position:sticky を直接記述するだけです。例は示しません。主なポイントは次の点を強調することです:

1. Sticky 要素の位置は相対的なものにすぎません。スクロール機構を備えた親ブロック要素 (オーバーフロー/スクロール/自動/オーバーレイに設定されたオーバーフローを持つ要素) が、親ブロック要素の代わりに配置されます。 codepen example

2. 対応する方向(上/右/下/左)が設定されている場合にのみ機能し、重ね合わせることができ、4方向を同時に設定することもできます。

3.position:stickyを設定しても親ブロック要素のコンテンツ領域にのみ表示され、負の値を設定しない限りこの領域を超えることはできません。

4. Position: Sticky は bfc をトリガーしません。簡単に言えば、高さを計算するときに float 要素は計算されません。

5. Position on: Sticky が設定されている場合、内部の位置決めはこの要素に対して相対的になります (コードペンの例)

6. Position: Sticky は相対または固定のように動作しますが、また、それらのレベルは z-index を介して設定できます。この要素の背後にある兄弟ノードがこの要素をカバーする場合、z-index を通じてレベルを調整できます。 (codepen の例)

7. スティッキー レイアウト要素の親要素が表示範囲内にある場合、要素のレイアウトは相対的であり、それ以外の場合は固定されます。

関連する推奨事項: CSS チュートリアル

以上がCSSで固定位置を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。