CSS の位​​置属性: 絶対と相対の違い

ページをレイアウトするために position を使用する場合、親要素の位置属性は、親内の特定の位置に配置される要素に対しては、影響を受けないため、相対的である必要があります。もちろん、paddingのプロパティも影響しますが、計算する際にはpaddingの値を忘れないでください。 ”

任意の要素のデフォルトの位置属性値は静的です

static。今日の51RGB Qグループ186242343は主に相対的(relative)と絶対的(absolute)について話します。

[position:absolute]
の意味: 絶対位置を意味します。デフォルトではブラウザの左上隅を参照し、TOP、RIGHT、BOTTOM、LEFTと連携します。
1) TRBL がない場合は、親の左上隅を参照します。親がない場合は、ブラウザの左上隅を参照します。親要素がないときにテキストがある場合は、その前の最後のテキストの右上隅を原点として配置しますが、テキストを分割せずに上に隠します。
2) TRBL が設定されており、親が位置属性を設定していない場合、現在の絶対値はブラウザの左上隅を原点として配置され、位置は TRBL によって決定されます。
3) TRBL が設定されており、親が位置属性 (絶対か相対かに関係なく) を設定している場合、親の左上隅が位置決めの原点として使用され、位置は TRBL によって決定されます。親に Padding 属性がある場合でも、親には影響しません。簡単に言うと、1 点のみを主張し、親の左上隅を位置決めの原点として使用します。全然。

上記の 3 つの点をまとめると、絶対配置属性を持つ要素を親要素内に配置する場合、
1 つ目: TRBL を設定する
2 つ目: 親の位置を設定するという 2 つの条件だけを満たす必要があります。属性
上記の概要は、absolue を使用してページをレイアウトするときに、位置がずれたり、ブラウザのサイズやモニターの解像度によって変化したりしないことを確認するために非常に重要です。
不満がある限り、要素はブラウザの左上隅を原点とします。これは、配置されたセクションのサイズが変更されると、それに応じて親要素も変更されやすい点です。ただし、この時点で要素がブラウザの右上隅を原点としているため、Position 属性が

absolute に設定されているセクションと親要素の位置が変更されてしまいます。
初心者にありがちな間違いは、Position 属性が絶対値であるセクションを知らないことです。セクションを親セクションに配置したいが、ブラウザーのサイズやモニターの解像度が変わってもレイアウトが変わらない場合は、両方の条件が満たされていれば必要ですが、どちらか一方でも満たされていない場合、要素はブラウザの左上隅を原点とし、ページレイアウトがずれる原因となります。

[position:relative]
は、親が存在しない場合、デフォルトで親の原点を原点として参照します。テキストフローの順序で、親にパディングなどのCSS属性がある場合、親コンテンツエリアの原点を参照して位置決めを行います。以下の属性:
1) TRBL がない場合は親を使用します要素の左上隅、親がない場合はブラウザの左上隅を参照します (これは絶対的なものと同じです)最初のポイント)、親要素のないテキストがある場合は、テキストの下部が位置およびテキストの区切りとして使用されます (絶対とは異なります)。
2) TRBL が設定されており、親が位置属性を設定していない場合、位置決めでは依然として親の左上隅が原点として使用されます (絶対とは異なります)
3) TRBL が設定されている場合、および親が設定した位置属性 (絶対的または相対的)、親の左上隅が位置決めの原点として使用され、位置は TRBL によって決定されます (前半は絶対的と同じ)。親に Padding 属性がある場合、コンテンツ領域の左上隅が位置決めの原点として使用されます (後半は絶対とは異なります)。

上記の3点から結論としては、親が存在するかどうか、TRBLがあるかどうかに関係なく、親の左上隅を基準に配置されますが、親のPadding属性は影響を及ぼします。
上記の相対の説明に基づいて、位置属性が相対である p を、TRBL を使用して位置決めできる通常の p とみなすことができます。または、通常のレイアウト ページで p の CSS 属性を基準に位置: を追加するだけで済みます。その後、float を使用してページをレイアウトするだけでなく、TRBL を使用してページをレイアウトすることもできます。つまり、position:relative を指定した p も通常の p と同じようにページをレイアウトできますが、TRBL を使用してページをレイアウトすることもできます。ページ。ただし、position 属性は絶対的です ページのレイアウトには使用できません。レイアウトに使用すると、すべての p がブラウザの左上隅を基準にして配置されるため、絶対属性を持つ要素内のどこかに要素を配置する場合にのみ使用できます。このようにして、より重要な結論をまとめることができます。absolute 属性を持つ要素は、親内の要素の位置を特定するために使用されるため、このとき、冒頭で述べたAbsolute の 3 番目の条項に従って、TRBL が不可欠です。 , 親要素に
position 属性がない場合、absolute 要素は親要素から分離されますが、レイアウト ページの場合は、親要素の location 属性を絶対にすることはできません。それ以外の場合は、左上隅がブラウザの位置が原点になるので、親要素のposition属性は相対値のみとなります！

相対属性を持つ要素はページのレイアウトに使用でき、絶対属性を持つ要素は親内の要素の位置を配置するために使用されます

概要: Position を使用してページをレイアウトする場合、親要素の位置属性 相対的である必要があり、親要素内の特定の位置に位置する要素の場合は、親要素のパディング属性の影響を受けないため、絶対的を使用するのが最善です。位置を使用しますが、値を計算するときはパディングを忘れないでください。
しかし、位置決めには内部要素の高さに適応しないという欠点があります。そのため、通常ページをレイアウトするときに、1 つまたはいくつかのモジュールの高さが決して変わらない場合は、位置決めを使用できますが、Fan は次のような場合に推奨します。ページをレイアウトする場合でも、Float をメインメソッドとして使用し、Position を補足として使用する必要があります。この方法でのみ高品質のページを作成できます。

最後に、私の言葉を思い出してください。「ページをレイアウトするとき、Float はメインであり、Position は補足です

」

以上がCSS の位​​置属性: 絶対と相対の違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。