DIV CSS でのposition 属性の使用法についての詳細な調査layout_html/css_WEB-ITnose

この記事では、DIV CSS レイアウトでのposition 属性の使用法について説明します。position 属性には主に 4 つの属性値があります。どの要素でも、デフォルトの location 属性値は静的です。このレッスンでは主に相対と絶対について説明します。

DIV+CSS レイアウトの位置属性を学習する方法

ページのレイアウトに位置属性を使用する場合、親要素の位置属性は相対的である必要があり、親要素内の特定の位置に配置された要素の場合、絶対的なものを使用するのが最善です。ページの配置とレイアウトは非常に簡単です。難しい場合は、理解するのが非常に難しく、ある程度の忍耐力が必要です。とてもわかりやすいです。

次のテキストを理解するのが本当に難しい場合は、このレッスンの最後の要約を思い出してください。「position を使用してページをレイアウトする場合、親要素の location 属性は相対的である必要があり、親要素のどこかに配置する必要があります。」要素の位置を指定するには、親要素のパディング属性の影響を受けないため、絶対値を使用するのが最善です。もちろん、位置を使用することもできますが、計算するときはパディング値を忘れないでください。

要素のデフォルトの位置はすべて静的です。このレッスンでは主に相対と絶対について説明します。

[DIV+CSSレイアウトのposition属性:absolute]

の意味: デフォルトではブラウザの左上を参照し、TOP、RIGHT、BOTTOM、LEFTと連携します。

1) TRBL がない場合は、親の左上隅を参照します。親がない場合は、ブラウザの左上隅を参照します。親要素のないテキストがある場合は、そのテキストを参照します。直前のテキストの右上隅が原点として配置されますが、テキストは分割されず、上にカバーされます。

2) TRBL が設定されており、親が位置属性を設定していない場合、現在の絶対値はブラウザの左上隅を原点として配置され、位置は TRBL によって決定されます。

3) TRBL が設定されており、親が位置属性 (絶対か相対かに関係なく) を設定している場合、親の左上隅が位置決めの原点として使用され、位置は TRBL によって決定されます。親に Padding 属性がある場合でも、親には影響しません。簡単に言うと、1 点のみを主張し、親の左上隅を位置決めの原点として使用します。全然。

上記の 3 つの点から、絶対配置属性を持つ要素を親要素内に配置したい場合は、次の 2 つの条件のみが満たされると結論付けることができます:

1 つ目: TRBL を設定する

2 つ目: 親が Position 属性を設定する

上記の概要は、絶対を使用してページをレイアウトするときに、位置がずれたり、ブラウザのサイズやモニターの解像度によって変化したりしないことを確認するために非常に重要です。

不満がある限り、要素はブラウザの左上隅を原点にします。これは、配置されたセクションのサイズが変更されると、それに応じて親要素も変更されやすい点です。このとき、要素がブラウザの右上隅を原点としているため、セクションと Position 属性が絶対値に設定されている親要素の位置が変更され、ずれてしまいます。

初心者が間違いやすいのは、Position 属性が絶対であるセクションを理解していないことです。そのセクションを親セクションに配置する場合、ブラウザーのサイズが変更されたり、モニターの解像度が変更されてもレイアウトが変更されない場合があります。 、要件を満たす必要があります。 2 つの条件のいずれかが満たされていない限り、要素はブラウザの左上隅を原点として使用するため、ページ レイアウトがずれる原因になります。

[DIV+CSS レイアウトの位置属性:相対]

は、親の元の点をデフォルトで参照します。親が存在しない場合は、前の要素の下が元になります。テキストフローの順序でポイントを配置し、TRBLと連携して配置します。親にパディングなどのCSS属性がある場合、親コンテンツエリアの原点を基準に配置されます。次の属性があります:

1) TRBL がない場合は、親を使用します。親がない場合は、ブラウザの左上隅を参照します (これは、最初の絶対点と同じです)。親要素のないテキストである場合、テキストの下部が位置およびテキストの区切りとして使用されます (absolut とは異なります)。

2) TRBL が設定されており、親が位置属性を設定していない場合、位置決めは依然として親の左上隅を原点として使用します (絶対とは異なります)

3) TRBL が設定されており、親が位置属性(絶対か相対か)を設定し、親の左上隅を原点として位置決めし、位置はTRBLで決定します(前半は絶対と同じ)。親に Padding 属性がある場合、コンテンツ領域の左上隅が位置決めの原点として使用されます (後半は絶対とは異なります)。 www.jbxue.com

上記の 3 つの点から、親が存在するかどうか、TRBL があるかどうかに関係なく、配置は親の左上隅に基づいて行われますが、親の Padding 属性が影響することがわかります。 。

上記の相対の説明に基づいて、位置属性が相対である DIV は、TRBL を使用して配置できる通常の DIV とみなすことができます。または、通常のレイアウト ページで div の CSS 属性に位置を追加するだけで済みます。 :relative の後は、float を使用してページをレイアウトするだけでなく、TRBL を使用してページをレイアウトすることもできます。つまり、position:relative を指定した DIV は、通常の DIV と同様にページをレイアウトできますが、TRBL を使用することもできます。ページをレイアウトします。ただし、絶対指定の位置属性はページのレイアウトには使用できません。レイアウトに使用すると、すべての DIV がブラウザの左上隅を基準にして配置されるため、絶対指定の要素上に要素を配置するためにのみ使用できます。内部のどこかに絶対的な属性があります。

このようにして、より重要な結論をまとめることができます:

相対属性を持つ要素はページのレイアウトに使用でき、絶対属性を持つ要素は親内の要素の位置を特定するために使用されます。このとき、冒頭で述べたabsoluteの第3条によれば、親要素にposition属性が無い場合はabsolute要素となります。ただし、レイアウト ページの場合は、親要素の位置属性を絶対値にすることはできません。それ以外の場合は、ブラウザの左上隅が原点となるため、親要素の位置属性は絶対値にすることができます。相対的であるだけです！

概要:

ページのレイアウトに位置を使用する場合、親要素の位置属性は相対的でなければなりません。親要素内の特定の位置に配置される要素については、影響を受けないため、絶対を使用するのが最善です。親要素のパディングによる影響、もちろん位置を使用することもできますが、計算時にはパディングの値を忘れないでください。