CSSポジショニング

この記事では、CSSの位置のプロパティは、Webページ上の様々なスタイリングソリューションを作成するために使用する方法を説明します.そしてもちろん、いくつかのユースケースを練習する.
飛び込みましょう!

HTMLドキュメントフロー

HTMLファイルの上位に記述されているWebページのHTML要素は、HTMLドキュメントが上部から下部に表示されているときに下位に記述されている要素よりも前にブラウザでレンダリングされます.
要素をデフォルトでページに表示する順序を通常フローと呼ぶ.MDNによると

Elements on a webpage layout are in the normal flow, if you have not applied any CSS to change the way they behave. And, as we began to discover, you can change how elements behave either by adjusting their position in that normal flow, or removing them from it altogether.

参照here
値の変更position プロパティは、ドキュメントの流れを変更します.の異なるタイプの位置決めを学び、それらとどのように動作するかを理解しましょう.

絶対測位

これは、親要素の範囲に対する位置決めを通常のフローから参照します.
文法

element {
  position: absolute;
}

親要素がない場合は、ブラウザのビューポートの範囲に対して設定されます.したがって、絶対位置を指定すると、ブラウザウィンドウは距離が設定されている境界線から親として動作します.

例えば、4つのブロックの下の画像は通常の流れに位置しており、デフォルトではその位置が静的に設定されています.

さて、要素3の位置を絶対値に変更しましょう.
Codepen
何が起こったのですか.基本的に絶対位置は、通常の流れから要素をプルし、通常の流れのブロック3以外のすべてのブロックは互いに続いていき、ウエブページ上の空間を占有する.ここで、ブロック3は絶対レベルまで上昇し、ブロック1、2、4の間の平面ではないので互いに向き合う.

そのため、絶対平面は静的平面上にあると言える.絶対的な位置での作業中に心にこの機能を保持します.
*

相対測位

相対的に配置された要素は、ページ上の元の位置に対して設定されます.以下に構文を示します:

element {
  position: relative;
}

それを見るために、同じ4つのブロックを考えましょう、しかし、今回は、ブロック3だけがありますposition: relative , 残りは通常の流れに残ります.

予想通り、BLOCK - 3は示された距離によって動きましたが、3番目の要素が以前にあった空のスペースに注意を払います.
何が起こったのですか.BLOCK - 3は物質的にページの上に存在します(このブロックのまわりの他の要素の表示は占有しているスペースに基づいて計算されます)、しかし、それは絶対的に位置する要素として、より高い平面にまだ上がります.そのため、BLOCK - 2とBLOCK - 4で重なったBLOCK - 3がその場所に留まり、移動しなかった.
何の用ですか.
CSSのこのプロパティは、占有されたスペースが正当に占有されたままであるので、サイトのレイアウトを破ることなくどこでも、ページ上の要素を移動することができます.

固定位置決め

固定ポジショニングは、ブラウザーのビューポートの可視部分に対してページ上の要素をロックし、垂直スクロール中にその位置を維持します.以下に構文を示します:

element {
  position: fixed;
}

例を見ましょう.
Codepen

粘着性位置決め

機能性に関して、粘着性の位置決めが適用される要素は、固定位置決めと相対的な位置決めの間にあります.ページが特定のポイントにスクロールされるまで、要素は相対的に配置されます.
ここに構文があります.

element {
  position: sticky;
}

例を見ましょう.
Codepen

結論

位置決めのおかげで、我々は柔軟に要素の位置を制御することができます
ページ.これは、ページの様々なスタイリングソリューションを作成するために使用されます
インターフェイススムーズに.
もうこれだけです.読んでくれてありがとう!コメントを共有します.
そのようなブログのために私に従ってください.
更なる資源

CSS Positioning on MDN

CSS Tricks