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