CSS 位置: 相対、絶対详解_html/css_WEB-ITnose

CSS の位​​置はレイアウトにおいて非常に重要です。たくさんの情報を確認しましたが、理解するのが難しいです。

文法:

position: 相対 | 絶対

相対: オブジェクトは通常のフローに従い、通常のフロー内の位置を基準にして、top、right、bottom、および left プロパティを通じてオフセットされる場合、通常のフロー内のどの要素にも影響を与えません。絶対: オブジェクトは通常のフローから切り離され、上、右、下、左およびその他の絶対位置の属性を使用します。ボックスのオフセット位置は通常のフロー内のどの要素にも影響せず、マージンはどの要素によっても崩れません。その他の余白。

説明:

Position:relative が設定されている場合、それ自体に対して相対的に配置されます。 (現在位置を移動することに相当します)

position:Absolute が設定されている場合、親を基準に配置され、ボディを基準に配置される親はありません。

備考: 位置: 絶対の場合、オブジェクトは積み重ねることができ、その積み重ねは z-index 属性によって定義されます。

位置: 相対の場合、オブジェクトを積み重ねることはできません