[css] position과 normal-flow

position

position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정합니다.

position 프로퍼티를 사용하면 요소의 위치를 정의할 수 있다. top, bottom, left, right 프로퍼티와 함께 사용하여 위치를 지정한다.

position: static | relative | absolute | fixed | sticky

static (기본 위치)

• position 프로퍼티의 기본값
• 부모 요소의 위치를 기준으로 잡음
• top, bottom, left, right 프로퍼티를 써도 무시한다.
• 이미 설정된 position이 있을 때 무력화하기 위해 사용한다.

relative (상대 위치)

• static으로 지정되었을 때의 위치를 기준으로 삼는다.
  • 그래서 부모를 기준으로 삼는다.(흔히 아는 css에서 배치되는 방식)
• top, bottom, left, right 프로퍼티로 좌표를 정할 수 있다.
• 외엔 static과 동일하다.

absolute (절대 위치)

• 부모 요소 또는 가장 가까이 있는 조상 요소를 기준으로 삼는다.
  • 가장 가까이 있는 조상 요소는 static이 아니어야 한다.
  • 즉, absolute, relative, fixed를 가진 부모/조상 요소를 기준으로 삼는다.
  • 만일 부모/조상 요소가 static인 경우, document body를 기준으로 삼는다.
• top, bottom, left, right 프로퍼티로 좌표를 정할 수 있다.
• 배치될 때 다른 요소가 같은 위치에 있더라도 위로 올라간다.
  • 이런 특성을 부유 또는 부유 객체라 한다.
• absolute 선언 시, 블록 요소의 width도 인라인 요소처럼 콘텐츠 크기에 맞게 줄어든다.

fixed (고정 위치)

• 부모 요소와 관계없이 브라우저의 viewport를 기준으로 좌표를 정한다.
• 스크롤이 되더라도 화면에서 사라지지 않는다. (항상 지정한 자리에 고정)
• fixed 선언 시, 블록 요소의 width도 인라인 요소처럼 콘텐츠 크기에 맞게 줄어든다.

normal-flow

normal-flow는 페이지에 css를 적용하지 않았을 때 문서가 기본적으로 요소를 배치하는 방법이다.

흔히 아는 블록 요소는 가로를 모두 차지하기 때문에 세로로 배치되고 인라인 요소는 콘텐츠만큼 가로를 차지하기 때문에 옆으로 나열되는 그 방법을 말하는 것이다.

• static은 normal-flow를 따른다. 익숙한 기본값이다.
• relative는 static처럼 normal-flow대로 그려질 위치를 기준으로 지정한 좌표만큼 옮겨진 곳에 그려진다.
• absolute는 처음부터 normal-flow를 따르지 않는다. 상위 요소 중 static이 아닌 요소를 찾아 기준으로 삼고 지정한 좌표만큼 옮겨진 곳에 그려진다.

요소 배치를 변경할 수 있는 css 속성

• display: block, inline, inline-block
• float
• position
• table
• flex
• grid

참고자료

• 2.8 CSS3 Position 요소의 위치 정의
• normal-flow
• CSS 레이아웃 Normal Flow & Floats