position: absolute 설정 시 top의 기본값 질문입니다.

Question

.container { position:relative; width: 300px; height: 300px; border: 1px solid; } .box1 { width: 300px; height: 300px; background: blue } .box2 { position: absolute; width: 300px; height: 300px; background: red; } 이해가 가지 않은 부분이 있어 예제를 단순화해서 질문을 올립니다. box2의 경우 부모 컨테이너의 영역을 넘어서는 상황에서 container가 position: relative이고 box2를 position: absolute일 때 제 생각에는 box2의 경우 일반적인 문서 흐름을 벗어났기 때문에 box2가 box1을 겹칠 것으로 예상했습니다. 하지만 그렇지 않았고 top:0을 해주었을 때 비로소 겹치게 되었는데요. 원래 별다른 설정이 없다면 디폴트값이 top:0, left:0이 아닌가요?

코딩웍스(Coding Works) · Answer

position: absolute; 를 주면 기볹거으로 top: 0; left: 0;로 좌표가 기본적으로 세팅되는데 .box2 위에 포지션 속성이 없는 .box1이 있어서 좌표가 top: 300px 이 되었네요. 저도 이런 경우로 작업한 기억이 없어서 왜 그런지는 이론적으로 설명드리려고 고민해봤는데... 명쾌한 설명이 떠오리지 않네요. 항상 position: absolute; 를 주고 top과 left를 줘서 위치시키는 방식이라서요. 현재 코드는 실전에서 좌표를 주는 부분이니까 너무 이론적인 부분으로 이해하려고 하지 마세요.