CSSの配置は、長い間、ウェブサイトのレイアウトを作成する重要な要素でした。フレックスボックスやCSSグリッドなどのCSSレイアウト技術が登場しても、ポジショニングはウェブデザイナーの手のひらの中で重要な位置を占めています。
CSSの配置を使用する場合、最初に行う必要があるのは、特定の要素に対して絶対配置または相対配置を使用するかどうかをブラウザに伝えるために、positionのCSSプロパティを設定することです。また、これらの2つの位置決めプロパティの違いを理解する必要があります。
絶対および相対はウェブデザインで最も頻繁に使用される2つのCSS位置プロパティですが、実際にはpositionプロパティには4つの状態があります。
- 静的
- 絶対の
- 相対
- 一定
スタティックポジショニング
Staticは、Webページ上の任意の要素のデフォルトの位置です。要素の位置を定義していない場合は静的です。つまり、HTMLドキュメント内の位置とそのドキュメントの通常のフロー内での表示方法に基づいて画面に表示されます。
次のような位置付けルールを適用すると 上 または 左 静的な位置を持つ要素には、これらの規則は無視され、要素は通常の文書フローに表示される場所にとどまります。これは、デフォルト値であるため、CSSの静的な位置に要素を設定することはめったにありません。
絶対CSSの配置
おそらく、絶対的なポジショニングはCSSの最も理解しやすい位置です。このCSSの位置プロパティから始めましょう：
位置：絶対;
この値は、ブラウザに、配置されるものがドキュメントの通常のフローから削除され、代わりにページの正確な場所に配置されるように指示します。これは、その要素に最も近い非静的に配置された祖先に基づいて計算されます。絶対的に配置された要素はドキュメントの通常の流れから取り出されるため、HTMLの前後の要素がどのようにWebページに配置されるかに影響します。 一例として、relativeの値を使用してそのディビジョン内に配置されたディビジョンがある場合、ディビジョンの上から50ピクセルを配置する段落があり、 絶対の その段落へのオフセット値 50ピクセル 〜に 上 プロパティ、このよう： 位置：絶対;top：50px;
この絶対配置された要素は、通常のフローで他に何が表示されていても、常にその相対的に配置された部分の上から50ピクセルを表示します。あなたの絶対配置された要素は、相対的に配置された要素をコンテキストとして使用し、使用する位置決め値は相対的なものです。 使用可能な4つの配置プロパティは次のとおりです。 いずれかを使用することができます 上 または 底 - これらの値の両方に基づいて要素を配置することはできないため、 右 または 左. 要素が絶対位置に設定されていても、非静的に配置された祖先がない場合は、ページの最上位要素であるbody要素を基準にして配置されます。 相対的な配置は、絶対的な配置と同じ4つの位置決めプロパティを使用しますが、要素の位置を最も静的ではない位置に配置するのではなく、要素が通常の流れのままである場所から開始します。 たとえば、ウェブページに3つの段落があり、3つ目の段落に ポジション：相対 スタイルは、その現在の位置に基づいてオフセットされます。 段落1。 パラグラフ2。 パラグラフ3。 上記の例では、3番目の段落は、コンテナ要素の左側から2emの位置にありますが、最初の2つの段落の下にあります。それは文書の通常の流れのままであり、わずかにオフセットされています。それを変更すると ポジション：絶対それ以降のものは、文書の通常の流れには含まれていないため、その上に表示されます。 ウェブページ上の要素は、多くの場合、値を設定するために使用されます ポジション：相対 オフセット値が設定されていないため、エレメントは通常のフローで表示される場所に正確に残っています。これは、他の要素を絶対的に配置できるコンテキストとしてその要素を確立するためにのみ行われます。たとえば、ウェブサイト全体を囲む部門があり、クラス値が 容器ウェブデザインの一般的なシナリオであるこの部門は、 相対 その内部にあるものは、それを測位コンテキストとして使用することができます。 固定の位置決めは、絶対位置決めとよく似ています。要素の位置は絶対モデルと同じ方法で計算されますが、固定要素はその場所に固定されます。ほとんどの場合、ウォーターマークのようになります。ページ上の他の要素はすべて、その要素をスクロールします。 このプロパティ値を使用するには、次のように設定します。 位置：固定;
サイト上の要素を修正すると、Webページが印刷されるときにその場所に要素が印刷されることに注意してください。たとえば、要素がページの上部に固定されている場合、その要素はページの上部に固定されているため、印刷されるすべてのページの上部に表示されます。メディアタイプを使用すると、印刷ページに固定要素が表示される方法を変更できます。 @メディア画面{ h1＃first {位置：固定; } } @media print { h1＃first {位置：静的。 } }
相対的な位置付け
固定ポジショニングはどうですか？
