((CSS)) position 속성 - relative, absolute, fixed

position: relative;

- position: relative;만 작성하면 위치에 아무 변화가 없다.

- top, right, bottom, left의 property를 사용해서 원래 위치로부터 입력한 값만큼 옮겨서 배치된다.

- 박스1 relatvie박스가 relative한 위치로 이동되었다.

 

position: absolute;

- 가장 가까운 부모 요소를 기준으로  움직인다.

- 기준으로 삼을 부모 요소에 position:relative;를 작성한다.

- 부모태그인 wrapper에 relative를 적용했으므로, 파란색 absolute박스는 노란색 배경을 기준으로 왼쪽으로 60px떨어져서 그려진다.

 

position:fixed;

- 스크롤에 상관없이 고정된 위치를 갖는다.

- 파란색 박스를 fixed 값을 적용시키고 박스5를 추가했다. 스크롤바를 내렸더니 박스3은 기존의 위치에서 고정된 것을 확인할 수 있다.