絶対に配置された要素がデフォルトでページの左上に配置されるのはなぜですか?

カスケード スタイル シート (CSS) での絶対配置

CSS では、絶対配置により、特定のピクセルを使用して親コンテナ内の要素を移動できます。またはパーセント値。ただし、絶対配置に関する問題が発生するとイライラすることがあります。絶対配置に関する一般的な問題と、それに対応する解決策を詳しく見てみましょう。

問題:

要素を親を基準とした絶対位置に配置しようとすると、要素の配置は失敗し、デフォルトでページの左上隅に配置されます。

コードサンプル:

<div>

解決策:

位置決め失敗の理由は、親コンテナーが位置決め要素ではないことにあります。絶対配置の要素は、同様に配置される最も近い祖先である offsetParent から配置されます。提供されたコードでは、祖先が配置されていないため、子要素はオフセット親である body 要素からオフセットされます。

解決策には、CSS プロパティのposition: 親 div に対する相対位置を適用することが含まれます。 。これにより、親要素が強制的に位置決め要素になり、その子の offsetParent になります。

修正されたコード サンプル:

<div>

親の "padding" を設定することにより、 -左: 20ピクセル;"および位置: 相対的な場合、親内に位置参照点を確立し、親内での子要素の正確な絶対位置を確保します。

以上が絶対に配置された要素がデフォルトでページの左上に配置されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。