絶対に配置された要素が垂直に積み重ねられずに重なるのはなぜですか?

絶対要素が次々に積み重なるのではなく重複する理由

提供された HTML コードでは、#row1 と #row2 の両方が絶対的に配置され、相対的に配置されたオブジェクト内にネストされています。容器。この配置により、要素は垂直方向のシーケンスを形成するのではなく、要素自体に積み重ねられます。

要素の配置について

静的配置: 要素のデフォルトの位置。これらはドキュメントのレイアウト内で自然に次々と流れます。

相対位置: 要素はドキュメント フロー内に残りますが、上、右、下、左を使用して位置を調整できます。 property.

絶対配置: 要素はドキュメント フローから取り出され、最も近い相対的に配置された祖先を基準にして配置されます。存在しない場合は、ビューポート。

問題分析

指定されたコードでは、要素は絶対的に配置されます。したがって、これらはドキュメント フローから独立しており、互いに関係がないため、重複します。

回避策

絶対的な配置が要件であるため、これを削除して要素を自然にスタックさせることはできません。 。回避策の 1 つは、要素にマージンまたはパディングを追加して要素間にバッファを作成し、要素が垂直方向に次々に表示されるようにすることです。ただし、このソリューションはすべてのケースに適しているわけではありません。

結論

CSS での要素の配置の複雑さを理解することは、効果的な Web 開発にとって重要です。静的、相対的、絶対的な配置の違いを理解することで、Web ページのレイアウトを正確に操作し、この例で発生したような意図しない重複の問題を回避できます。

以上が絶対に配置された要素が垂直に積み重ねられずに重なるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。