CSS Positionの詳しい説明

フォント、テキスト、背景など、CSS の他の多くのプロパティはほとんどが理解しやすいものです。 CSS 本の中には、これらの単純なプロパティを大々的に紹介するものもありますが、一部の難しいプロパティについては説明が省略されており、重要なことを避けて簡単に考えているのではないかと疑われています。理解するのが難しい CSS の主なプロパティには、ボックス構造と配置が含まれます。ポジションがすべてであるのと同じように、この記事では主にポジションの理解について説明し、この記事を読んだ後にポジションについて最も包括的に理解できるように努めます。

position の 4 つの属性値:

1. relative

2. absolute

3. fixed

4. static

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

sub1

sub2

1.relative

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

left: 5px;

}


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

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

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

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

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

2. 絶対

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

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

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

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

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

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

3. fixed

fixed は特別な絶対値です。つまり、fixed は常にボディを位置決めオブジェクトとして受け取り、ブラウザー ウィンドウに従って位置決めされます。

4. static

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

この記事に技術的またはプレゼンテーション上の問題がある場合は、メッセージを残してください。読んでくれてありがとう！

CSS Position の詳細な説明と関連記事については、PHP 中国語 Web サイトに注目してください。