[CSS] position: static, relative, absolute, fixed

CSS에서 요소들의 배치 방법에 대해 정의합니다.

position은 static(기본값), relative, absolute, fixed, sticky로 지정할 수 있습니다.

 

static

• 기본값, normal flow대로 정의됩니다.
• top, bottom, left, right, z-index의 영향을 받지 않습니다.

relative

• 엘레멘트가 normal flow로 정의되고 난 후, 자신을 기준으로 top, right, bottom, left 값에 적용을 받습니다.
• z-index도 적용 됩니다.

absolute

• normal flow에 포함되지 않으며 레이아웃도 차지하지 않습니다.
• 자신의 조상 중 position 값이 relative, fixed, absolute로 설정된 엘레멘트를 기준으로 top, right, bottom, left 값이 적용됩니다.
• 조상 중 relative, fixed, absolute로 지정된 엘레멘트가 없다면 body가 기준이 됩니다.

fixed

• normal flow에 포함되지 않으며 레이아웃도 차지하지 않습니다.
• 조상 중 tranform, perspective, filter 속성 중 하나라도 지정되어 있다면 해당 요소를 기준으로 삼습니다.
• 기본적으로는 뷰포트를 기준으로 삼습니다.
• top, right, bottom, left 값이 적용됩니다.

sticky

• normal flow로 정의됩니다.
• 조상 중 테이블 관련 요소나 스크롤 동작이 존재하는 요소(overflow: hidden/scroll/auto/overlay)를 기준(containing block)으로 삼습니다.
• 기준이 되는 엘레멘트를 찾지 못한다면 sticky가 동작하지 않습니다.

 

 

References

• developer.mozilla.org/ko/docs/Web/CSS/position
• www.tcpschool.com/css/css_position_position