css의 position property에 대해 이야기 해보도록 하자.
position: static- 모든 tag의 default 값
position: relativetop, right, bottom, left값을 지정해주기 전까지는position: static과 똑같은 모습으로 보인다.top, right, bottom, left값 설정시,position: static을 기준으로 설정한 값만큼 이동한다.
position: absolute- 바로 위의
position: relative가 할당된 부모 tag를 기준으로 움직인다. position: relative가 할당된 부모 tag가 없다면,<body>를 기준으로 움직인다.top, right, bottom, left값 설정시, 부모 tag의 해당 property로 부터 설정한 값만큼 이동한다.
- 바로 위의
position: fixed- 렌더링되는 화면을 기준으로 위치를 잡고 싶을 때 사용한다.
- 화면을 기준으로 렌더링을 하기 때문에, 스크롤을 하더라고 화면에서 움직이지 않는다.
top, right, bottom, left값 설정시, 렌더링 화면에서 해당 property로 부터 설정한 값만큼 이동한다.
