div 위치 지정이 어려움

Question

페이지의 다른 요소를 기준으로 div를 배치하고 싶습니다.

초기 CSS는 다음과 같습니다.

으아악

필요할 때 다음 코드를 실행합니다.

으아악

결과는 다음과 같습니다.

으아악

(X와 Y는 Left와 Top의 동의어입니다)

다음과 같습니다:

질문은 다음과 같습니다. s.top이 p.top과 다른 이유는 무엇인가요?

Answer 1

#success는 절대 위치이므로 DOM의 다른 요소 흐름이 위치 지정에 영향을 주지 않는 반면, top 等属性会影响其定位，而 #puzzle 的位置为 static （默认），并且不受 top는 유사하지만 문서 흐름에 적합합니다.

From https://www.w3schools.com/Css/css_positioning.asp

#success를 #퍼즐의 왼쪽 상단에 배치하려면 #puzzle에 position:relative를 설정하고 HTML에서 #success의 상위 항목인지 확인하세요.