한 줄 요약
모든 요소는 처음부터 position: static이고, 이 상태에서는 top이나 left를 줘도 움직이지 않습니다.
비유로 이해하기
운동장에 출석 번호대로 줄 서 있는 학생들을 떠올려 보세요. 각자 정해진 순서대로 서 있을 뿐, 혼자 “왼쪽으로 20걸음!”이라고 해도 움직이지 않습니다. 줄(흐름)을 따르는 게 규칙이니까요.
웹페이지의 모든 요소가 바로 이 상태, position: static입니다. 따로 적지 않아도 기본값으로 들어 있어요. 레이아웃 시리즈 1편의 ‘흐름(Flow)’대로 놓여 있는 상태라고 생각하면 됩니다.
비교해 보기
- static: 흐름대로 제자리.
top,left,z-index가 무시됩니다. - static이 아닌 값(relative, absolute, fixed, sticky): 이때부터 top, left 같은 위치 지정이 작동합니다.
- 그래서 “top을 줬는데 안 움직여요”의 첫 번째 원인은 대부분 position을 바꾸지 않은 것입니다.
직접 실행해 보기
두 상자에 똑같이 top: 30px; left: 30px;을 줬습니다. 위 상자는 static이라 움직이지 않습니다. 위 상자의 position: static을 relative로 바꿔 보세요.
GenerateBlocks에서는
GenerateBlocks의 컨테이너는 따로 설정하지 않으면 static입니다. 스타일 패널의 Position 항목이 비어 있다면 static 상태라고 보면 되고, 위치를 옮기고 싶을 때만 값을 바꾸면 됩니다.