ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS で重複する絶対位置の要素を垂直方向に積み重ねるにはどうすればよいですか?

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

DDD
リリース: 2024-12-10 09:04:10
オリジナル
754 人が閲覧しました

How to Vertically Stack Overlapping Absolutely Positioned Elements in 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート