CSS の位置属性 (absolute|relative|static|fixed) の概要と応用

まず、CSS3 Api の position 属性の定義を見てみましょう。

static: 特別な配置はなく、オブジェクトは通常のドキュメントフローに従います。上、右、下、左などのプロパティは適用されません。
relative: オブジェクトは通常のドキュメントフローに従いますが、上、右、下、左などのプロパティに従って通常のドキュメントフロー内でオフセットされます。スタッキングは z-index プロパティによって定義されます。
absolute: オブジェクトは通常のドキュメントフローから分離され、top、right、bottom、left などのプロパティを使用して絶対的に配置されます。スタッキングは z-index プロパティによって定義されます。
固定: オブジェクトは通常のドキュメントフローから分離され、ウィンドウを基準点として上、右、下、左などのプロパティを使用して配置されます。スクロールバーが表示されても、オブジェクトはスクロールしません。スタッキングは z-index プロパティによって定義されます。

どうですか？まだ混乱していますか？問題ありません。いくつかの基本的な概念から一つずつ説明しましょう。

ドキュメントフローとは何ですか?

フォームを上から下に行に分割し、各行の要素を左から右に配置します。これがドキュメントフローです。

要素がドキュメントフローから外れる状況は、フローティング、絶対配置、相対配置の 3 つだけです。

静的配置（静的）:

静的、特別な配置なし、これは HTML 要素のデフォルトの配置モードです。つまり、要素の位置属性を設定しない場合、デフォルトの位置値は静的であり、通常のドキュメントフローオブジェクトに従い、オブジェクトがドキュメントスペースを占有します。この配置モードでは、上、右、下、左、z-index などの属性は無効です。

相対的な位置:

相対ポジショニングは、相対ポジショニングとも呼ばれ、文字通りこの属性の主な機能である「相対」として解釈できます。しかし、何と比較してでしょうか?これが重要なポイントであり、私にとって最も混乱する部分でもあります。では、テストをしてみましょう。皆さんも理解できると思います。

（１）当初は位置づけられていなかった

コードをコピー

コードは次のとおりです。

/******イニシャル*********/
<スタイルタイプ="text/css">
#first { 幅: 200px; 高さ: 100px; 境界線: 1px 赤一色; }
#second{ 幅: 200px; 高さ: 100px; 境界線: 1px 青一色;}
</スタイル>
<本文>
<div id="first"> 最初</div>
<div id="second">秒</div>
</本文>

オリジナル画像:

（２）最初の要素の位置属性を変更します。

コードをコピー

コードは次のとおりです。

<スタイルタイプ="text/css">
#first{ 幅: 200px; 高さ: 100px; 境界線: 1px 赤一色; 位置: 相対; 上: 20px; 左: 20px;} /*位置を追加*/
#second{幅: 200px; 高さ: 100px; 境界線: 1px 青一色;}
</スタイル>

20pxオフセットした後:

-- >> 点線は初期位置空間です

これで、相対配置はドキュメントフロー内の元の位置を基準にしていることがおわかりいただけたと思います。また、相対配置も通常のドキュメントフローに従い、ドキュメントフローから逸脱することはありませんが、上/左/右/下の属性が有効であり、静的から絶対への中間遷移属性であると言えます。最も重要なことは、それが依然としてドキュメントスペースを占有し、占有されるドキュメントスペースは上/右/左/下の属性のオフセットによって変化しないことです。つまり、その背後にある要素は点線の位置に従って配置されます (上/左/右/下の属性が有効になる前)。これは理解しておく必要があります。

わかりました。top / right / left / bottom プロパティは、相対的に配置された要素によって占有されるドキュメントスペースをオフセットしないことがわかりましたが、margin / padding はそのドキュメントスペースをオフセットするのでしょうか?答えはイエスです。一緒に実験してみましょう。

（３）マージン属性を追加する：

コードをコピー

コードは次のとおりです。

<スタイルタイプ="text/css">
#first{width: 200px;height: 100px;border: 1px solid red;position: relative;top: 20px;left: 20px;margin: 20px;} /* マージンを追加*/
#second{幅: 200px;高さ:100px;境界線: 1px 青一色;}
</スタイル>

マージンを20pxに設定した後:

比較すると、非常に明確ではないでしょうか。最初に最初の要素の余白を 20 px に設定し、次に 2 番目の要素を 40 px 下方にオフセットする必要があるため、余白がドキュメントスペースを占有します。同様に、パディングの効果を自分で測定することもできます。

絶対位置決め:

アブソリュートポジショニングは絶対ポジショニングとも呼ばれ、名前は「絶対」ですが、機能は「相対」という言葉に近いです。なぜそう言うのですか? absoulte を使用して配置された要素がドキュメントフローを離れた後は、祖先要素 (親の上) に基づいてのみ配置でき、この祖先は位置が静的でない方法で配置する必要があります。たとえば、要素が absoulte を使用して配置されている場合、親クラスから開始し、位置が静的でない方法で配置されている祖先要素 (直接の祖先である必要があることに注意してください) を <html> タグまで探します。また、ここで注目すべき点は、相対メソッドと静的メソッドは、最も外側のレイヤーでの位置の起点として <body> タグを使用するのに対し、absoulte メソッドは、親がなく位置が静的でない場合に、位置の起点として <html> を使用することです。 <html> 要素と <body> 要素は約 9px 異なります。効果を見てみましょう:

（4）absoulte属性を追加する：

コードをコピー

コードは次のとおりです。

<html>
<スタイルタイプ="text/css">
html{border:1px 破線緑;}
body{border:1px 破線紫;}
#first{ 幅: 200px; 高さ: 100px; 境界線: 1px 赤一色; 位置: 相対;}
#second{ 幅: 200px; 高さ: 100px; 境界線: 1px 青一色; 位置: 絶対; 上:0; 左: 0;}
</スタイル>
<本文>
<div id="first">相対</div>
<div id="second">絶対</div>
</本文>
</html>

効果画像:

ハハ、上記のコードを読んだ後、注意深い友人は間違いなく、なぜ絶対配置に top:0; left:0; 属性を追加する必要があるのかと尋ねるでしょう。これは冗長ではないですか?

実際、これら 2 つの属性を追加することは絶対に必要です。絶対配置または固定配置を使用する場合は、left、right、top、bottom 属性の少なくとも 1 つを指定する必要があるためです。そうしないと、left/right/top/bottom 属性はデフォルト値の auto を使用し、オブジェクトは通常の HTML レイアウトルールに従い、前のオブジェクトの直後にレンダリングされます。つまり、それらはすべて相対的になり、ドキュメントスペースを占有します。これは非常に重要です。絶対配置を使用した後でもドキュメントフローから外れないことに気付く人は多くいます。これが理由です。ここに特に注意してください~~~

left/right/top/bottom 属性が欠落していると機能しないので、さらに設定するとどうなるでしょうか?たとえば、top 属性値と bottom 属性値を同時に設定した場合、要素はどこにオフセットすればよいでしょうか?次のルールを覚えておいてください:

上部と下部が一緒に存在する場合は、上部のみが有効になります。
左と右が同時に存在する場合は、左のみが有効になります。

絶対位置は祖先クラスの非静的要素の位置に従って決定されるため、祖先クラスのマージン/パディングは位置に影響しますか?まずは例を見てみましょう。

（５）絶対位置にマージン/パディング属性を追加する：

コードをコピー

コードは次のとおりです。

#first{幅: 200px;高さ: 100px;境界線: 1px 赤一色;位置: 相対;余白: 40px;パディング: 40px;}
#second{幅: 200px;高さ:100px;境界線: 1px 青一色;位置: 絶対;上:20px;左:20px;}
<div id="first">最初
<div id="second">秒</div>
</div>

効果画像:

祖先クラスのマージンによってサブクラスの絶対位置がシフトしますが、パディングによってサブクラスの絶対位置がシフトすることはないと理解しています。まとめると、absoulte は祖先クラスの境界に従って配置されます。

注意:オブジェクトを表示領域外に絶対位置で配置すると、スクロールバーが表示されます。相対的に配置されたオブジェクトを表示領域外に配置すると、スクロールバーは表示されません。

固定位置:

固定配置は、ドキュメントフローから分離され、上、右、左、下の属性に従って配置できるという点で絶対配置と同じです。違いは、固定配置はウィンドウを原点としてオフセットされる点です。つまり、スクロールバーのスクロールに応じてオフセットされることはありません。

z-indexプロパティ:

z-index はオブジェクトの重ね順とも呼ばれ、整数を使用して重ね順を定義します。整数値が大きいほど、重ね順が高くなります。もちろん、これは同じレベルの要素間の重ね順を指します。2 つのオブジェクトのこの属性が同じ値の場合、HTML 文書内での順序に従って重ね順になり、後から記述したものが前に記述したものを覆います。親子関係は z-index を使用して設定できないことに注意してください。子は上に、親は下になければなりません。

注意: 静的配置または位置指定なしの配置を使用する要素の z-index プロパティは無効です。

<<: HTML ヘッド構造

>>: CSSレイアウトにおけるフローティング問題に対する4つの解決策の詳細な説明