position: abusoluteが位置指定しないと動かない理由は

絶対位置指定された要素が動かない理由:

1. 位置指定がない場合のデフォルト動作:
   • position: absolute が適用されていても、top や left などのプロパティが設定されていなければ、その要素は親要素の基準位置（通常は左上）にそのままの位置で表示されます。
   • 見た目上、他の要素が隠れることはあっても、要素自体が勝手に動くことはありません。
2. HTMLのフローから除外される:
   • 絶対位置の要素は通常のレイアウトフローから外れます。したがって、兄弟要素がそのスペースを埋めようとして動くため、隣接要素が重なっているように見えるのです。
3. 親要素基準の影響:
   位置指定がない場合、absolute 要素は基準とする親要素の左上（top: 0; left: 0 と同じ位置）に留まります。CSSを適用していない限り、この基準からずれることはありません。

動かすためには:

要素を動かすためには、以下のように top や left プロパティを指定する必要があります。

cssコードをコピーする#absolute .middle {
    position: absolute;
    top: 20px;
    left: 30px;
}

結論:

• 絶対位置を指定しても、top、left、right、bottom を明示的に指定しなければ、要素は基準位置に留まり、動きません。
• 他の要素が重なって見えるのは、絶対位置の要素がフローから外れるためです。

tmtk

プログラミング初学者

XInstagramYouTube

東京生まれ多摩地区在住 アラフォーになってから学習を始めました。