絶対に配置された要素が間違った場所に表示されるのはなぜですか?

要素の配置が間違っている: 絶対配置と固定配置を理解する

CSS の絶対配置と固定配置により、要素をドキュメントまたはビューポート内に正確に配置できます。ただし、要素が予期した場所に表示されない場合があります。これは、これらの配置方法の仕組みについての誤解が原因であることがよくあります。

静的配置に関する問題

要素が静的に配置される (デフォルト) と、要素はフローします。ドキュメントの残りの部分と、周囲の要素から位置を取得します。与えられた例では、グレーボックスの div は絶対的に配置されます。ただし、コンテナには絶対的な位置や固定位置ではなく、相対的な位置があります。これは、グレーのボックスがドキュメントのフローの影響を受け続け、コンテナの静的位置を基準にして配置されることを意味します。

絶対位置と固定位置

絶対Positioning は、ドキュメントのフローから要素を削除し、最も近い位置にある祖先を基準にして要素を配置します。配置された祖先がない場合は、ドキュメント自体を基準にして配置されます。固定配置は絶対配置に似ていますが、祖先ではなくビューポートを基準にして要素を配置します。

最初の例では、グレーのボックスは絶対配置されますが、そのコンテナは静的に配置されます。前に説明したように、これは、グレーのボックスがコンテナの静的位置 (左上隅ではない) を基準にして配置されることを意味します。

2 番目の例では、グレーのボックスはコンテナの前に移動されます。オレンジボックス。これにより、オレンジ色のボックスが、グレーのボックスが占めるはずだったスペースを占めることになります。したがって、オレンジ色のボックスの後にグレーのボックスが表示されます。

問題の修正

グレーのボックスを正しく配置するには、コンテナを絶対配置するか、固定する必要があります。 。これにより、グレーのボックスをコンテナの静的位置ではなく、コンテナの絶対位置または固定位置を基準にして配置できるようになります。

修正されたコードは次のとおりです。

.container {
  background: lightblue;
  position: absolute;
}

ここで、グレーのボックスは、予想どおり、ボックスがコンテナーの左上隅に表示されるはずです。

以上が絶対に配置された要素が間違った場所に表示されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。