CSS で重複する絶対位置の要素を垂直方向に積み重ねるにはどうすればよいですか?

垂直方向に積み重ねるために絶対的に配置された要素の重複を解決する

CSS では、position プロパティを相対、絶対、固定などのさまざまな値に設定できます。要素が絶対的に配置される場合、その要素は通常のドキュメント フローから削除され、最も近い位置にある祖先またはビューポートを基準にして配置されます。この動作により要素が互いに重なり合う可能性があり、望ましい効果が得られない可能性があります。

要素の配置について

• 静的 (デフォルト):要素はドキュメント フロー内で通常どおりスタックされます。
• 相対: 要素はドキュメント フロー内に残ります。
• 絶対: 要素はドキュメント フローから削除され、最も近い位置にある祖先を基準にして配置されます。

絶対的に配置された要素の重複

次の例では、クラス .row およびクラスを持つ要素.col は絶対的に配置されているため、重なり合います:

body {
  position: relative; /* Contains absolutely positioned elements */
}

.container {
  position: absolute;
}

.row {
  position: relative;
}

.col1, .col2 {
  position: absolute;
}

この問題を解決して要素を垂直方向にスタックするには、要素の高さを指定し、垂直方向の位置が正しく管理されていることを確認する必要があります。

位置プロパティを削除しない解決策

要素の CSS を変更するのは理想的ではありませんが、位置プロパティを削除せずに考えられる解決策は、各 .row の高さを調整し、最初の .row の高さを考慮して 2 番目の .row の一番上のプロパティを調整します。

body {
  /* position: relative; remains unchanged */
}

.container {
  /* position: absolute; remains unchanged */
}

.row {
  position: relative;
  height: 2em; /* Specify height for vertical stacking */
}

.col1, .col2 {
  /* position: absolute; remains unchanged */
}

#row2 {
  top: 2em; /* Offset to account for the height of #row1 */
}

解決策を理解する

• 要素の絶対位置。
• 垂直方向を許可するために、各 .row の高さを指定します。
• 2 番目の .row (#row2) の上部プロパティを調整して、最初の .row (#row1) の高さだけオフセットします。

考慮事項

• .row 要素の高さが正確で、パディングやパディングが含まれていることを確認してください。 margin.
• このソリューションは、高さが不明な動的に生成されたコンテンツには適していない可能性があります。
• 複雑な動作につながる可能性があるため、絶対位置に配置された要素を複数ネストすることは一般的に推奨されません。
>

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