HTMLにおけるposition属性の使い方を詳しく解説（4種類）

この記事では主に HTML におけるポジションの 4 つの属性値を紹介します。興味のある方は編集者をフォローしてご覧ください。位置の属性値：

1.relative

2.absolute

3.fixed
4.static

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

<p id="parent">
     <p id="sub1">sub1</p>
     <p id="sub2">sub2</p>
</p>

1.相対

相対属性は、どのオブジェクトからオフセットされているかを把握する必要があります。答えはその場所にあります。上記のコードで、sub1とsub2は兄弟関係にあります。例えば、sub1の相対属性を設定する場合は、次のCSSコードを設定します。

#sub1
{
    position: relative;
    padding: 5px;
    top: 5px;
    left: 5px;
}

とすると、このように理解できます。が設定されていない場合、sub1 の位置は次のようになります。通常のドキュメント フローでは、どこかにあるはずです。ただし、sub1 の位置が相対に設定されている場合、上、右、下、左の値に応じて想定される位置に応じてオフセットされます。相対の「相対」の意味もこれに反映されます。 。

このために必要なのは、sub1 が相対的に設定されていない場合の位置を覚えておくことだけです。設定したら、位置に従ってオフセットします。

次の質問は、sub2 の位置はどこですか?答えは、sub1 がposition 属性を追加するため、以前の位置と現在の位置は変わりません。

このときsub2の位置も相対にするとどうなるでしょうか？この時点では、まだ sub1 と同じであり、元の位置に従ってオフセットされています。

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

2. 絶対的

この属性を常に誤解する人がいます。位置属性が絶対に設定されている場合、常にブラウザウィンドウに従って配置されると言われていますが、これは実際には間違っています。実はこれが固定資産の特徴なのです。

sub1 の位置を絶対位置に設定した場合、オフセットの対象となるのは誰ですか?ここには 2 つの状況があります:

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

オブジェクトは決定されましたが、注意が必要な詳細がいくつかあることに注意してください。つまり、オブジェクトを配置するために親のどの位置決め点を使用する必要があるかということです。親がマージン、ボーダー、パディングなどの属性を設定している場合、この位置決めポイントはパディングを無視し、パディングの先頭から (つまり、パディングの左上隅からのみ開始して) 配置されます。つまり、パディングを無視しますが、もちろんマージンとボーダーは無視しません。

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

(2) sub1 に位置属性を持つ親オブジェクトがない場合、body が位置決めオブジェクトとして使用され、ブラウザ ウィンドウに従って配置されます。

3.fixed

fixed は特別な絶対値です。つまり、fixed は常に本体を位置決めオブジェクトとして受け取り、ブラウザ ウィンドウに従って位置決めされます。ドラッグしてスクロールしても位置は変わりません。同様に、background-attachment:fixed

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

4 のデフォルト値。通常、属性は通常のドキュメント フローに従って配置されます。

まとめ

以上は編集者が紹介したhtmlでのpositionの使い方で、皆さんの参考になれば幸いです。 ！

以上がHTMLにおけるposition属性の使い方を詳しく解説（4種類）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。