position 속성을 사용하여 요소의 배치 방법을 지정합니다.

🧩 position

position 속성으로 배치 방법을 결정하고,
top, right, bottom, left 속성으로 최종 위치를 정합니다.

position 은 다음으로 설정 가능합니다.

• static
• relative
• absolute
• fixed
• sticky

static 을 제외하고 나머지로 position을 설정하면 positioned layout 이 되어
top, right, bottom, left 프로퍼티를 사용할 수 있습니다.

static

position 속성의 기본값입니다.
html 문서에 작성된 순서와 흐름에 따라 배치되므로 positioned layout 이 아닌 flow layout 입니다.

• position: static 이나 position: initial
• 일반적인 문서 흐름에 따라 요소 배치
• top, right, bottom, left, z-index 속성의 영향을 받지 않음

relative

relative 로 설정하면 그 요소는 자신의 기본 위치(flow layout 위치)를 기준으로 움직입니다.
top, right, bottom, left 값의 조정은 static 설정 시의
요소 자기 자신의 위치에서 얼마나 멀어질 지 결정하게 됩니다.

relative 지정된 요소는 새로운 쌓임 맥락을 생성하여 다른 요소의 위로 올라옵니다.

• 일반적인 문서 흐름에 따라 요소 배치
• z-index 가 있으면 새로운 쌓임 맥락 생성
• 블록과 인라인 요소 모두 사용 가능

absolute

absolute 를 사용하면 컨테이닝 블록을 기준으로 위치를 정합니다.
이 때, position: static 이 아닌 가장 가까운 부모 요소가 컨테이닝 블록이 됩니다.
그런 요소가 없다면, 초기 컨테이닝 블록(html)을 기준으로 합니다.

top, right, bottom, left 값의 조정은 컨테이닝 블록의 각 면과 해당 요소의 면 사이 거리를 의미합니다. (top: 50px 은 부모의 윗면과 자식의 윗면 사이 거리)
요소에 너비나 높이를 따로 지정하지 않으면 지정한 위치를 충족하도록 사이즈가 늘어납니다.

absolute 도 relative 처럼 새로운 쌓임 맥락을 생성합니다.

• 일반적인 문서 흐름에서 요소 제거, 페이지 레이아웃에 공간 배정 ❌
  • 위치 조정 전에는 일반 흐름에서 위치했어야 할 자리에 배치됨
    • 단, 기본 자리를 유추할 때 일반적 문서 흐름에서 제거된 요소는 무시함
• position: static 이 아닌 상위 요소를 기준으로 배치
• z-index 가 있으면 새로운 쌓임 맥락 생성
• 블록과 인라인 요소 모두 사용 가능

fixed

fixed 는 요소의 위치를 고정할 때 사용합니다.
스크롤바를 내리면 일반적인 요소는 가려져서 보이지 않지만, fixed 지정된 요소는 위치를 그대로 유지합니다.

fixed 로 지정하면 뷰포트(보이는 영역의 html)를 컨테이닝 블록으로 삼아 위치를 정합니다.
그래서 스크롤해도 위치가 변하지 않고 고정되는 요소에 사용합니다.

그러나, 부모 요소 중 transform, perspective, filter, will-change 속성의 값이 none 이 아닌 게 있다면, 그 요소를 컨테이닝 블록으로 지정합니다.
그래서 뷰포트 영역을 따라 위치가 고정되는 효과(스크롤해도 위치 변하지 않음)가 나타나지 않게 되죠.

top, right, bottom, left 값의 조정은 뷰포트를 기준으로 얼마나 떨어질 지 결정합니다.

• 일반적인 문서 흐름에서 요소 제거, 페이지 레이아웃에 공간 배정 ❌
• 항상 새로운 쌓임 맥락 생성

sticky

sticky 는 fixed 와 비슷하게 스크롤링 해도 위치가 고정되지만, 몇몇 사항에 차이가 있습니다.

sticky 로 지정하면 요소는 스크롤링 기능이 있는 가장 가까운 상위 요소(overflow 가 visible 이 아닌 요소)를 컨테이닝 블록으로 삼으며, flow layout 에 따른 기본 위치에 배치됩니다.

sticky 요소는 평상시 flow layout 의 일반적인 요소처럼 취급됩니다.
그러나 요소가 컨테이닝 블록에 대해 top, right, bottom, left 로 정한 임계점에 도달하게 되면, 요소는 그 위치에 고정됩니다.

또한 요소는 자신의 컨테이너 밖으로 벗어날 수 없습니다.
따라서 스크롤이 진행되어 컨테이너가 뷰포트 위로 올라가면, sticky 요소도 같이 보이지 않게 됩니다.

요소가 가질 수 있는 컨테이닝 블록은 하나이므로, 혹시 sticky 동작이 나타나지 않는다면
가까운 부모 컨테이너가 스크롤링 컨테이너가 되지 않았는지 확인해봐야 합니다.
만약 그랬다면 요소는 그 컨테이너의 지역 스크롤링 맥락 안에서만 sticky 동작을 보일겁니다.

즉, sticky 요소는 뷰포트에 부모 컨테이너가 존재하는 동안 컨테이닝 블록에 대한 상대 위치를 유지합니다.

• 일반적인 문서 흐름에 따라 요소 배치
• 항상 새로운 쌓임 맥락 생성
  • 형제 요소 서로가 다 sticky 라면 html 문서 위치 상 나중에 위치하는 요소가 상위 레이어에 위치(더 위에 그려짐)

일반적인 문서 흐름❓

일반적인 문서 흐름이란 무엇일까요?
위에서 나온 바에 따르면 static, relative, sticky 는 일반적인 문서 흐름(flow layout)을 따르고
absolute, fixed 는 일반적인 문서 흐름에서 제거된다고 하네요.

일반적인 문서 흐름을 따른다는 것은 다음과 같은 의미가 있습니다.

브라우저: 일단 모든 요소가 static 인 것처럼 배치하고 position 이 static 아닌 것들을 재배치해.

(실제 동작 메카니즘과 일치한다고 볼 수는 없지만, 위처럼 이해하면 말이 됩니다)
먼저 flow layout 에 따라 배치하고, positioned 요소를 재배치하는 것이죠.

위처럼 되면, position 이 static, relative, sticky 인 것들은 다른 요소의 배치에 영향을 미치지 않습니다.
다른 요소들은 positioned layout 으로 배치된 요소가 static 이었다면 있었을 공간과 위치를 산정해서 배치됩니다. 즉, 일반 흐름에 따라 배치된 것이죠.

위처럼... static 이었다면 원래 그 요소가 차지했을 공간이 그대로 남아있습니다!

---

그렇다면, 일반적인 문서 흐름에서 제거된다는 것은 어떤 의미인지 알 수 있습니다.
static 이었다면 원래 그 요소가 차지했을 공간을 남겨두지 않습니다.

위처럼 배치됩니다. 페이지 레이아웃에 공간도 배정하지 않는다는 것을 확인할 수 있습니다.

inset 으로 position 정하기

inset 프로퍼티로 top, right, bottom, left 를 모두 지정할 수 있습니다.
padding 이나 margin 처럼 사용하면 됩니다.

/* <length> values */
inset: 10px; /* value applied to all edges */
inset: 4px 8px; /* top/bottom left/right */
inset: 5px 15px 10px; /* top left/right bottom */
inset: 2.4em 3em 3em 3em; /* top right bottom left */

/* <percentage>s of the width (left/right) or height (top/bottom) of the containing block */
inset: 10% 5% 5% 5%;