HTML & CSS 기초 - postion & 좌표 레이아웃

위와 같은 레이아웃을 만들어본다고 해보자.
보이는 박스(div)가 몇개인가?
내 눈에 보이는 박스는 5개이다.

제일 아래 박스가 겹쳐지게끔 위로 이동시켜주는 것이 포인트인데
어떻게 div를 내 마음대로 움직이게 할 수 있을까?

CSS에는 좌표속성이 있다.

.box {
  top : 20px;
  left : 30%;
}

HTML 에서는 위와같이 top left right bottom라는 속성을 사용해주면 언제든지 좌표이동을 할 수 있다.
하지만 내 위치가 어디인줄 알고 어떻게 이동하는가?
이동하기 전에는 항상 기준점이 필요하다.

.box {
  position : static; /* 기준이 엄서요 (좌표적용 불가) */
  position : relative; /* 기준이 내 원래 위치요 */
  position : absolute; /* 기준이 내 부모요 */
  position : fixed; /* 기준이 브라우저 창이요 (viewport) */
}

하나의 기준점으로 삼고 싶은 박스가 있을 때 position : relative; 코드를 써주어 자식 요소들의 위치를 변경할 때 이 "relative" 속성을 써준 부모태그가 기준점이 되는 것이다.