「html/cssのpositionのabsoluteとrelativeの意味は分かるものの、実際に使うと他のプロパティとの関係性によりどういう動きをするのか理解できないのですが、なぜそのような動きをするのか教えていただけますか?」

positionプロパティのabsoluteとrelativeの動作について、理解するためには他の関連するプロパティとの関係性を考慮する必要があります。

まず、positionプロパティが使われる要素は、親要素に対して相対的な位置を持つか、またはドキュメント上の位置を基準にして位置を指定します。

relativeは要素自体を通常のドキュメントのフローに従った位置に配置するためのものです。relativeによる位置の指定は、親要素に対して相対的な位置を持つため、他の要素との関係性によって動きが変わることがあります。例えば、要素が親要素内で左から10px、上から20pxの位置に配置されている場合、他の要素がその周りに配置されていた場合、要素がその他の要素と重なることなく配置されます。

一方、absoluteは要素を通常のドキュメントのフローから外し、親要素またはドキュメント全体を基準にして位置を指定します。absoluteによる位置の指定は、他の要素との関係性によって動きが変わることがあります。例えば、要素が左から10px、上から20pxの位置に配置されている場合、他の要素がその周りに配置されていた場合、要素がその他の要素と重なりながら配置されることがあります。

このように、relativeとabsoluteの動きは他の要素との関係性によって変わることがあります。具体的な動きを理解するには、他の要素や親要素との関係性を考慮して、CSSのボックスモデルやpositionプロパティの詳細な仕様を確認する必要があります。

追加の説明や質問があればお知らせください。

コメントを残す