Position

static

• Normal-flow 에 따라 배치되며 offset 값이 적용되지 않는다. (기본값)

absolute

• 부모 요소의 위치를 기준으로 offset 에 따라 배치된다.
• Normal-flow의 흐름에서 벗어난다.
• inline에 속성을 주면 자동으로 display:block이 된다.
• 부모의 기준 위치는 border는 제외하고 padding은 포함한다.
• 부모가 position 값(static 제외)을 가지면 offset 값의 시작점이 된다.
  • 부모의 position 값이 static 인 경우 조상의 position 값이 static이 아닐 때까지 거슬러 올라가 기준으로 삼는다.

fixed

• 뷰포트(브라우저의 창)를 기준으로 offset 에 따라 배치된다.
  즉, 화면 스크롤에 관계없이 항상 화면의 정해진 위치에 정보가 나타난다.
• 부모의 위치에 영향을 받지 않는다.
• inline에 속성을 주면 자동으로 display:block이 된다.

relative

• 자신이 원래 있어야 할 위치를 기준으로 offset 에 따라 배치된다.
• 부모의 position 속성에 영향을 받지 않는다.
• Normal -flow의 흐름에 따른다.
• 주변 요소에 영향을 주지 않으면서 offset 값으로 이동한다

Normal-flow란?

일반적인 상황에서 각의 요소들의 성질에 따라 배치 되는 순서(흐름)
예를 들면, block 레벨 요소들은 상하로 배치되고, inline 레벨 요소들은 좌우로 배치되는 것을 말한다.

offset의 %단위 사용

padding과 margin에서 % 값을 적용할 때, 상하좌우 방향에 관계없이 가로 사이즈를 기준으로 %값을 계산되지만
offset은 top, bottom (상하) 는 기준이 되는 요소의 height 값 left, right (좌우) 는 width값에 대하여 계산되어진다.

z-index

• position 값이 static이 아닌 경우 지정가능 (position값이 지정이 되어있어야 적용이 가능하다.)
• 순서 값이 없을 경우 생성순서(코드상 순서)에 따라 쌓임
• 큰 값이 가장 위쪽(음수 사용 가능)
• 부모가 z-index 값이 있을 경우 부모 안에서만 의미있음
  • 부모에게 z-index값을 줄 경우 부모끼리 먼저 z-index순위를 정한 뒤 자식이 적용된다. 즉, 자식의 z-index값이 아무리 높다 하더라도 부모의 값이 낮으면 위로 올라올 수 없다.
  • 자식들은 부모 내부에서만 우선 쌓임을 처리한 뒤 부모 내부 요소의 쌓기와 렌더링이 끝난 후에는, 루트 요소의 쌓임 맥락 하에서 전체 부모들의 쌓임이 이루어진다. (형제끼리)

쌓임맥락/MDN