CSS位置(Position)

📍 Position

position propertyは要素の位置を定義します.top、bottom、left、right propertyとともに使用して位置を指定します.

エンティティの位置を定義する4つの属性位置属性値

1.Static（デフォルト）

静止して動かない.

staticはposition propertyのデフォルト値で、position propertyが指定されていない場合と同じです.

上から下へ、左から右へ順に配置し、子要素が親要素内に存在する場合、親要素の位置に対して配置します.

座標プロファイルは一緒に使用できません.使用する場合は無視します.

座標プロファイルオフセット

top

right

bottom

left
:位置を指定します.positionプロパティとともに使用します.

¥¥
:offsetプロパティはstaticに影響しません!

2.相対（相対位置）

親の扶養費を基準に相対運動をする.

デフォルトの位置(staticとして指定した場合の位置)に対してtop、bottom、left、rightを使用して位置を移動します.

[静的](Static)と[相対的](Relative)と宣言された要素の違いは、座標プロファイル内で移動するかどうかであり、他の要素の動作は同じです.

場所が設定されていない場合は適用されません.(要素の位置は変わりません.)

3.absolute（絶対位置）

座標プロファイル(上部、下部、左側、右側)は、親要素または最も近い親要素(静的を除く)に対して移動します.

すなわち、位置propertyは(相対的、絶対的、固定的)な親または祖先要素を基準として移動する(ない場合はページの最エッジを基準とする).

親要素の配置基準に従って移動する場合は、親要素の相対を定義する必要があります.

absoluteが指定されている場合、左とtopの等値が与えられない場合、デフォルトは親要素に対する元の位置(左とtopなど)です.
このとき、左と右が0になります.html基準(または静的でない親または祖先基準)で位置を変更するには、特定の値を指定します.(0を指定するとpxなどの単位を使わなくてもよい🧐)

📌 簡単に言えば、非静的親が現れるまで無視し、非静的親が現れると、親の位置に基づいてoffset値を指定します.
親エレメントとリンクを解除した子エレメントは、親エレメントのサイズの100%を使用しますが、リンクを解除したため、サイズを指定できないため、自身のコンテンツサイズに変更します.そのため、widthやheightなどを設定して直接サイズを指定する必要があります.
練習▼▼反応型タイトルにabsoluteを使い、デフォルトではブラウザ画面上の任意の位置にイラストを自由に置くことができます.(offsetとともにこのプロパティを使用すると、追加したアイコンを任意の親要素に必要な場所に配置できます.)

📌 相対(相対位置)&absolute(絶対位置)プロパティの違い

relative
:座標プロファイル(上部、下部、左側、右側)を使用してデフォルト位置(static)に対して位置を移動し、親位置に対して相対的に移動します.

absolute
:親にstatic以外のposition propertyが指定されている場合にのみ、親に基づいて位置決めされます.親、祖先がデフォルトの場所である場合、親との関係は中断され、ドキュメントボディを基準に位置決めされます.

したがって、絶対プロパティ要素は親要素の内部に束縛されず、独立した配置コンテキストを有します.

4.固定（固定位置）

スクロールは画面から消えず、指定された位置に固定されます.

すなわち、fixedは、スクロールとは完全に独立した特定の領域を所望のスクリーン位置に固定する.

親要素を考慮せずに、ブラウザのビューポートに対して座標プロファイル(上部、下部、左側、右側)を使用して配置します.

固定構成を宣言すると、block要素のwidthはinline要素のように内容によって変化するため、適切なwidthを指定する必要があります.

すなわちfixedもabsoluteのようにwidthとheightの値を指定しない場合、親に関連付けられたボリュームがないため、自分のコンテンツと同じサイズになります.
(また、親-子のリンクが切断されているため、親のサイズには子のサイズは含まれません.)

▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼😀 ▼

ex.)
background-color: black;
color: white;
position: fixed;
bottom: 0;
width: 100%;
text-align: center;

▼▼▼▼▼4、基本、・▼4、相対位置、・▼4、絶対位置、・▼4、スクロールに関係なくスクリーンに固定.fixed科static親とのリンクが切れているため、ボリュームは自分の内容と同じで、親ユニットも子要素を無視する特徴がある.
reference
poiemaWeb Coding-everybody position_offset