著者 Xiaoyi のブログ: http://andymao.com/
多くの友人が、絶対と相対を区別する方法とその使い方を尋ねてきました。絶対的なものは絶対的な位置決めであり、相対的なものは相対的な位置決めであることは誰もが知っていますが、絶対的なものと相対的なものは何を意味するのでしょうか?何が絶対的で、何に対して相対的なのか?では、それらはどのような特徴を持ち、どのような効果をもたらすのでしょうか?二人の間にはどんなスキルがあるのでしょうか?以下で一つずつ説明していきましょう。
Absolute、CSSでの書き方は、position:absolute; ブラウザの左上隅を参照し、TOP、RIGHT、BOTTOM、LEFTと連携します。設定がない場合は、親の原点にデフォルトで設定される TRBL を設定します。 TRBL が設定されており、親が位置属性を設定していない場合、現在の絶対値はブラウザの左上隅を原点として配置され、位置は TRBL によって決定されます。
一般に、[絶対] を使用して Web ページを中央に配置すると、間違いが起こりやすくなります。Web ページは常に解像度のサイズに自動的に適応され、[絶対] はブラウザの左上隅を次のように使用するためです。変更によって位置が変わるのは解像度ではなく、元の点です。多くの人が間違えるのはここです。左側の Web ページの特徴は Relative とよく似ていますが、それでも本質的な違いがあります。
相対、CSS での記述方法は次のとおりです:position:relative; 絶対 相対 位置を意味し、親の元の点を元の点として参照します。親の場合はBODYの原点を原点とし、親にパディングなどのCSS属性がある場合は、その原点を基準にカレントレベルの原点を配置します。親コンテンツ領域。
場合によっては、コンテナの上位と下位の関係を設定するために z-index に依存する必要があります。値が大きいほど、値の範囲は自然数になります。もちろん、注意すべき点は、z-index を使用して親子関係を上下に設定することはできないということです。子が上に、親が下になければなりません。