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

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

1.相対幅と絶対幅

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

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

を設定します。高さと相対位置

高さを 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 の上のスペースが占有されるのはなぜですか?

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