HTML+CSS position

위와 같은 레이아웃을 만들어본다고 해보자.
보이는 박스(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" 속성을 써준 부모태그가 기준점이 되는 것이다.