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

絶対要素が水平ではなく垂直に積み重ねられる

CSS で要素を絶対配置で配置すると、予期しない積み重ね動作が発生する可能性があります。絶対要素が横に並ぶのではなく互いに積み重ねられる理由を理解するために、CSS の配置の基礎を詳しく見てみましょう。

相対配置と絶対配置

要素が location:relative で配置されている場合、要素は通常のドキュメント フロー内での位置を維持しますが、top、right、bottom、または left プロパティを使用して移動できます。相対配置の要素は、周囲の要素のレイアウトに影響を与えません。

対照的に、position:Absolute の要素はドキュメント フローから削除され、その要素を含む要素または最も近い位置にある祖先に対して相対的に配置されます。絶対要素は独自のスペースを占有し、フロー内の他の要素と対話しなくなりました。

例では

コードでは、#row1 と #row2 の両方に絶対要素があります。配置し、文書の流れから独立させます。これらの要素は両方とも絶対に配置された .container の子であるため、絶対配置された .container に対して相対的に配置されます。 #row1 は #row2 の前に配置されているため、その上に表示されます。

問題の解決

#row1 と #row2 を縦に表示するには、次の行を削除する必要がありますこれらの要素から絶対位置を取得し、それを含む要素 .container に適用します。これにより、行は通常のブロック要素のように動作し、上下に垂直に積み重ねることができます。

.container {
  position: absolute;
}

.row {
  position: static;
}

CSS の位​​置を理解する

さらに明確にするために、さまざまな要素を調べてみましょう。 CSS 位置値:

• static: 要素通常のドキュメント フローに残ります。
• relative: 要素はフロー内の位置を保持しますが、top、right、bottom、または left プロパティを使用して移動できます。
• absolute: 要素はフローから削除され、その要素を含む要素または最も近い要素に対して相対的に配置されます。 ancestor.
• fixed: 要素はフローから削除され、ビューポートを基準にして配置されます。

CSS の配置の仕組みを理解することで、 Web ページ上の要素のレイアウトと積み重ね。

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