Position 속성

문서상에 요소들을 배치하는 방법이다.

문서 어디에 기준점을 가지고 있는지! 기준점을 중심으로 이해하자!

1. position: static;

• 기본값. (아무런 값을 지정해 주지 않았을 때 기본으로 설정되는 값)
• static 엘리먼트는 위치가 지정된 것이 아니라고 표현한다.
• top, right, bottom, left, z-index 속성을 넣어도 무시된다.

2. position: relative;

• 엘리먼트를 기존에 있었던 자리 기준으로 상대적으로 배치한다.
• relative는 주변 레이아웃에 영향을 주지않는다.
• 별도의 프로퍼티를 지정하지 않으면 static과 동일하게 동작한다.

3. position: absolute;

• 엘리먼트를 가장 가까운 곳에 위치한 조상 요소에 대해 상대적으로 배치한다.
  (이 점을 제외하면 fixed와 비슷하게 동작)
• relative와 다르게 주변 레이아웃에 영향을 미친다. absolute로 설정을 하면 엘리먼트
  를 일반적인 문서 흐름에서 제거하기 때문에, 페이지 레이아웃에 공간을 따로 배정하지 않는다.
  따라서 부모노드의 width가 정의되어 있지 않을때 자식 요소를absolute로 설정하면 부모의 크
  기도 작아진다.
• 절대 위치가 지정된 엘리먼트(position: static;이 아닌)를 기준으로 삼는 조상 엘리먼트가
  없으면 문서 body를 기준으로 삼고, 페이지 스크롤에 따라 움직인다.

4. position: fixed;

• Viewport에 상대적으로 위치가 지정된다.(스크롤되더라도 늘 같은 곳에 위치한다는 뜻)
• 따라서 absolute와는 다르게 (0,0) 위치가 기준이 된다.

5. position: sticky;

• sticky도 viewport를 기준으로 동작한다.
• fixed와의 차이점은, 엘리먼트가 viewport안에 있을 시에는 relative와 같이 동작하지만,
  viewport에서 사라지는 순간 fixed처럼 동작하며 설정한 위치에 고정된다.
  (relative처럼 동작하다가 스크롤이 특정 지점에 도달하면 엘리먼트를 고정)