CSS position

postion의 기본값은 static이다.

1. static

왼쪽에서 오른쪽, 위에서 아래로 쌓인다.

2. relative

기존 static 이었을 때의 위치를 기준으로 안쪽 방향으로 top, right, bottom, left 속성에 따라 위치가 이동한다.

3. absolute

조상중에 position: static 속성을 가지고 있지 않은 조상을 기준으로 위치가 이동한다. 즉, relavtive나 absolute나 fixed 속성을 가지고 있는 조상을 기준으로 한다. 만약 조상중에 그런 엘리먼트가 없다면 body엘리먼트가 기준이 된다. 참고로, absolute가 되면 div여도 width: 100%가 아니다.

4. fixed

스크롤에 따라 움직이지 않고 위치가 고정된다. div여도 width: 100%가 아니다.

5. sticky

부모 엘리먼트를 기준으로 주어진 위치에 도달할 때까지는 relative로 작동을 하다가, 주어진 위치에 도달하면 fixed로 작동한다.