Position

static

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

absolute

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

⚠️ 부모와 첫번째 자식 요소의 margin과의 관계

position parent offset

fixed

• 부모 요소와 관계없이 viewport(브라우저의 창)를 기준으로 offset 에 따라 배치된다.

  즉, 화면 스크롤에 관계없이 항상 화면의 정해진 위치에 정보가 나타난다.

• 부모의 위치에 영향을 받지 않는다.

• inline에 속성을 주면 자동으로 display: block 이 된다.