CSS で絶対要素が重複しないようにするにはどうすればよいですか?

絶対要素の垂直オーバーラップ: 解決策

HTML コードで、次のように 2 つの行 #row1 と #row2 を定義しました。絶対的な位置決め。この問題は、絶対要素が通常のドキュメント フローから削除され、互いに積み重なってコンテンツが重複するために発生します。

これを解決するには、絶対配置の目的と動作を理解する必要があります。要素をposition:Absolute;に設定することにより、その要素を標準フローから削除し、最も近い位置にある祖先を基準にして配置します。

この例では、.row と .col1、.col2 は、内部にネストされた絶対要素です。 .container、これも絶対です。ただし、3 つの要素はすべて絶対的なため、すべて独立して重なり合います。

この問題を解決するには、適切な配置階層を確立する必要があります。これは、 .row を相対位置に設定することで実現できます。この方法では、.col1 と .col2 は絶対値のままになりますが、ドキュメント フロー内の .row に対して相対的に配置されます。

この変更により、#row1 と #row2 が法線を尊重して垂直方向にスタックできるようになります。ブロック要素の動作。変更された CSS は次のとおりです。

body { position:relative; min-height: 2em; width: 100%; }
.container {position:absolute;}
.row {position:relative;}
.col1, .col2 {position: absolute;}

この変更により、#row1 と #row2 が期待どおりに互いの下に表示されるようにしながら、必要な配置プロパティが維持されます。

以上がCSS で絶対要素が重複しないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。