絶対位置と相対位置: なぜ動作がこれほど異なるのでしょうか?

絶対位置と相対位置を理解する: 幅、高さなど

Web ページ上の要素の配置を扱う場合、概念を理解する絶対位置と相対位置の区別が重要です。よく質問される 4 つの重要なポイントを詳しく見てみましょう:

1.相対幅と絶対幅

相対的に配置された div は自動的に 100% の幅を占めるのに対し、絶対的に配置された div はコンテンツの幅のみを占めるのはなぜですか?

その理由は、位置の設定です。 :absolute は、文書構造の通常のフローから要素を削除します。幅を明示的に定義しないと、ブラウザは絶対位置の div の幅を決定できません。幅を 100% にするには、明示的に width:100% を設定します。

2.高さと相対位置

高さを 100% に設定しても、相対的に配置された div には影響がないのに、絶対的に配置された div は高さ 100% を占めるのはなぜですか?

位置を持つ要素:relative は、高さの点で、position:static を持つ要素と同様に動作します。したがって、親要素の高さが定義されていない限り、height:100% を設定しても効果はありません。対照的に、絶対的に配置された要素はドキュメント フローから削除され、その要素を含む要素の高さに基づいて高さが調整されます。

3. Margin-Top とシフト

margin-top:30px は絶対位置の div をシフトするのに、top:30px を使用すると相対的に位置する div だけがシフトするのはなぜですか?

これはおそらくHTML 構造内の親要素に関連します。完全な HTML および CSS コードを提供しないと、正確な原因を特定することは困難です。

4. Top と Left のない絶対位置

絶対位置の div に top:0 と left:0 を指定しない場合、その前の div の上のスペースが占有されるのはなぜですか?

上部と左側のプロパティのデフォルト設定は auto です。これは、ブラウザーが、position:absolute がなかった場合の要素の位置に基づいて、これらの値を自動的に計算することを意味します。その結果、絶対位置の div は、位置を明示的に定義せずに、前の div の上に表示されます。

以上が絶対位置と相対位置: なぜ動作がこれほど異なるのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。