divの配置が難しい

Question

ページ上の他の要素を基準にして div を配置したいと考えています。

これは初期 CSS です:

リーリー

必要に応じて、次のコードを実行します:

リーリー ＃＃＃消す：＃＃＃ リーリー

(X と Y は Left と Top の同義語です)

次のようになります:

問題は次のとおりです。 s.top と p.top はなぜ違うのですか?

Answer 1

#success は絶対的に配置されるため、DOM 内の他の要素のフローはその配置に影響しませんが、top などの属性はその配置に影響し、#puzzle の位置は ですstatic (デフォルト) top などの影響を受けませんが、ドキュメント フローに適しています。

からhttps://www.w3schools.com/Css/css_positioning.asp

#success を #puzzle の左上隅に配置したい場合は、#puzzle に position:relative を設定し、それが HTML 内の #success の親であることを確認します。