HTMLのposition属性の使い方（4種類）の詳しい説明

位置の 4 つのプロパティ値は次のとおりです。

1.相対的な
2.絶対
3.修正
4.静的

これら 4 つの属性については以下で説明します。

<div id="親">
     <div id="sub1">サブ1</div>
     <div id="sub2">サブ2</div>
</div>

1. 相対的な

相対プロパティは比較的単純です。どのオブジェクトに対して相対的にオフセットされるかを把握する必要があります。答えはその場所そのものです。上記のコードでは、sub1 と sub2 は兄弟です。たとえば、sub1 に相対属性を設定する場合は、次の CSS コードを設定します。

#サブ1
{
    位置: 相対的;
    パディング: 5px;
    上: 5px;
    左: 5px;
}

これを次のように理解することができます。相対属性が設定されていない場合、sub1 の位置は通常のドキュメント フローに従って特定の位置にある必要があります。しかし、sub1の位置を相対的に設定すると、本来あるべき位置に合わせて上、右、下、左の値に応じてオフセットされます。relativeの「相対的」という意味がここに反映されます。

このためには、relative が設定されていない場合は sub1 がどこにあるべきかを覚えておき、設定されたら、それがどこにあるべきかに応じてオフセットするだけです。

次の質問は、sub2 の場所はどこですか?答えは、元の位置にあり、sub1 が位置属性を追加したため、位置は変更されないということです。

sub2 の位置も相対的に設定した場合はどうなりますか?このとき、sub1 と同じまま、元の位置に合わせてオフセットされます。

相対オフセットはオブジェクトのマージンの左上を基準にしていることに注意してください。

2. 絶対的な

この属性は常に誤解を招きます。 position 属性が absolute に設定されている場合、常にブラウザ ウィンドウに従って配置されるというのは誤りです。実はこれが固定属性の特徴なのです。

sub1 の位置が絶対値に設定されている場合、オフセットの対象は誰ですか?ここでは 2 つの状況があります。

（１）sub1の親オブジェクト（または親オブジェクトであれば曽祖父オブジェクト）も位置属性を設定し、位置属性値が絶対値または相対値、つまりデフォルト値でない場合、sub1はこの親に従って配置されます。

オブジェクトは決定されていますが、注意が必要な詳細がいくつかあります。つまり、親のどのアンカー ポイントを配置に使用する必要があるかということです。親が margin、border、padding などのプロパティを設定している場合、このアンカー ポイントは padding を無視し、padding の先頭 (つまり、padding の左上隅からのみ) から配置されます。つまり、padding は無視されますが、margin と border は無視されません。

次の質問は、sub2 の場所はどこですか?位置が絶対値に設定されている場合、sub1 は通常のドキュメント フローをオーバーフローするため、親に属していないのと同じように、上に浮き上がります。DreamWeaver では、これは「レイヤー」と呼ばれ、実際には同じ意味です。この時点で、sub2 は sub1 の位置を取得し、そのドキュメント フローは sub1 に基づくのではなく、親から直接開始されます。

（２）sub1に位置属性を持つ親オブジェクトがない場合、bodyが配置オブジェクトとして使用され、ブラウザウィンドウに応じて配置が行われます。これは比較的理解しやすいです。

3. 修正

fixed は特別な絶対値です。つまり、fixed は常に body を配置オブジェクトとして受け取り、ブラウザウィンドウに応じて配置されます。スクロールバーをドラッグしても、その位置は変わりません。 background-attachment:fixed に類似

もちろん、Dreamweaverではサポートされていないようです

4. 静的

position 属性が設定されていない場合、position のデフォルト値は、通常のドキュメント フローに従って要素を配置することです。

要約する

上記はエディターが紹介した HTML の位置の使用方法です。皆様のお役に立てれば幸いです。ご質問がある場合はメッセージを残してください。エディターがすぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。