position

position: static

• 모든 HTML 요소의 position 속성의 기본 설정값.
• 단순히 웹 페이지의 흐름에 따라 차례대로 요소들을 위치시키는 방식.
• z-index 속성과 top, right, bottom, left 속성이 적용되지 않는다.
• 요소를 일반적인 문서 흐름에 따라 배치.

position: relative

• 해당 HTML 요소의 기본 위치(static position)를 기준으로 위치를 설정.
• 요소를 일반적인 문서 흐름에 따라 배치.

position: absolute

• 위치가 설정된 조상(ancestor) 요소를 기준으로 위치를 설정.
• 위치가 설정된 조상(ancestor) 요소를 가지지 않는다면, HTML 문서의 body 요소를 기준으로 위치를 설정.

위치가 설정된 요소라는 것은 정적 위치(static position) 지정 방식을 제외한 다른 방식(relative, fixed, absolute)으로 위치가 설정된 요소를 의미한다.

• 요소를 일반적인 문서 흐름에서 제거.

position: fixed

• 뷰포트(viewport)를 기준으로 위치를 설정.
• 웹 페이지가 스크롤 되어도 고정 위치로 지정된 요소는 항상 같은 곳에 위치하게 된다.
• 요소를 일반적인 문서 흐름에서 제거.

position: sticky

• 가장 가까운, 스크롤되는 조상을 기준으로 위치를 설정.
• fixed와 비슷하지만 해당 조상의 위치가 스크롤을 벗어나면 고정되던 위치가 사라진다.
• 요소를 일반적인 문서 흐름에 따라 배치.

fixed와 sticky의 차이: 김평범's OrdinaryCode

정적 위치(static position) 지정 방식을 제외한 나머지 다른 방식(relative, absolute, fixed, sticky)들은 전부 어떤 기준에 대해 해당 요소의 상대적인 위치를 설정하는 방식이다.