CSS の絶対および相対 CSS/HTML を理解する

多くの友人が、絶対と相対の区別とその使用方法を尋ねてきました。絶対とは絶対的な位置を意味し、相対とは相対的な位置を意味することは誰もが知っていますが、絶対と相対とは何を意味するのでしょうか?絶対的なものはどこにあり、何に対して相対的なものなのでしょうか？では、それらはどのような特徴を持ち、どのような効果をもたらすのでしょうか？二人の間にはどんなスキルがあるのでしょうか？以下で一つずつ説明していきましょう。

Absolute、CSS での記述方法は次のとおりです:position:absolute; 位置決めのための TOP、RIGHT、BOTTOM、LEFT (以下、TRBL と呼びます) TRBL が設定されていない場合、デフォルトは親の原点に基づきます。 。 TRBL が設定されており、親が位置属性を設定していない場合、現在の絶対値はブラウザの左上隅を原点として配置され、位置は TRBL によって決定されます。

一般に、[絶対] を使用して Web ページを中央に配置すると、間違いが起こりやすくなります。Web ページは常に解像度のサイズに自動的に適応され、[絶対] はブラウザの左上隅を次のように使用するためです。変更によって位置が変わるのは解像度ではなく、元の点です。多くの人が間違えるのはここです。左側の Web ページの特徴は Relative とよく似ていますが、それでも本質的な違いがあります。

CSSでの書き方は、position:relative; 親の原点を原点として参照するという意味です。 TRBL と連動した原点位置 位置決めの場合、親にパディングなどの CSS 属性がある場合、親コンテンツ領域の原点を参照して、現在のレベルの原点が配置されます。

場合によっては、コンテナーの上位と下位の関係を設定するために z-index に依存する必要もあります。値が大きいほど、上位が高くなります。値の範囲は自然数です。もちろん、注意すべき点は、z-index を使用して親子関係を上下に設定することはできないということです。子が上に、親が下になければなりません。