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

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

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

問題:

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

コードサンプル:

<div>
<p><strong>解決策:</strong></p>
<p>位置決め失敗の理由は、親コンテナーが位置決め要素ではないことにあります。絶対配置の要素は、同様に配置される最も近い祖先である offsetParent から配置されます。提供されたコードでは、祖先が配置されていないため、子要素はオフセット親である body 要素からオフセットされます。</p>
<p>解決策には、CSS プロパティのposition: 親 div に対する相対位置を適用することが含まれます。 。これにより、親要素が強制的に位置決め要素になり、その子の offsetParent になります。</p>
<p><strong>修正されたコード サンプル:</strong></p>
<pre class="brush:php;toolbar:false"><div><p>親の "padding" を設定することにより、 -左: 20ピクセル;"および位置: 相対的な場合、親内に位置参照点を確立し、親内での子要素の正確な絶対位置を確保します。</p></div>