페이지의 다른 요소를 기준으로 div를 배치하고 싶습니다.
초기 CSS는 다음과 같습니다.
필요할 때 다음 코드를 실행합니다.
결과는 다음과 같습니다.
(X와 Y는 Left와 Top의 동의어입니다)
다음과 같습니다:
질문은 다음과 같습니다. s.top이 p.top과 다른 이유는 무엇인가요?
#success는 절대 위치이므로 DOM의 다른 요소 흐름이 위치 지정에 영향을 주지 않는 반면, top 等属性会影响其定位，而 #puzzle 的位置为 static （默认），并且不受 top는 유사하지만 문서 흐름에 적합합니다.
top
static
From https://www.w3schools.com/Css/css_positioning.asp
#success를 #퍼즐의 왼쪽 상단에 배치하려면 #puzzle에 position:relative를 설정하고 HTML에서 #success의 상위 항목인지 확인하세요.
position:relative
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
#success는 절대 위치이므로 DOM의 다른 요소 흐름이 위치 지정에 영향을 주지 않는 반면,
top等属性会影响其定位，而 #puzzle 的位置为static（默认），并且不受top는 유사하지만 문서 흐름에 적합합니다.From https://www.w3schools.com/Css/css_positioning.asp
#success를 #퍼즐의 왼쪽 상단에 배치하려면 #puzzle에
position:relative를 설정하고 HTML에서 #success의 상위 항목인지 확인하세요.