면접을 보면서 css에 대한 내용을 확실하게 공부해야겠다고 생각했고, 그 중 오늘은 position에 대해 공부를 해보려고 한다.
position을 쓰면서 어떤 기준으로 움직이고, 안되는 순간에 대한 이해도를 높이고 싶었다.

Position

css position 속성은 문서 상에 요소를 배치하는 방법을 지정한다.

position: static;

static은 default로 설정되어 있는 값이다.

position: relative;

자신의 원래 위치를 기준으로 위치를 변경하고 싶을 때 사용한다.
(자신의 원래 위치: 정적 위치(static position) 지정 방식일 때 결정되는 위치)
z-index의 값이 auto가 아니라면 새로운 쌓임 맥락을 생성한다.

//.css
<style>
	div.relative{
		position: relative;
		top: 40px;
		left: 40px;
    }
</style>

쌓임맥락: 가상의 z축을 사용한 HTMl 요소의 3차원을 개념화 한다.
쌓임 맥락이 다른 쌓임 맥락을 포함할 수 있고, 함께 계층 구조를 이룹니다.
형제 쌓임 맥락과 완전히 분리되고 자손 요소만 고려한다.

position: absolute;

뷰포트를 기준으로 하는 거시 아닌 가장 가까운 위치 지정 조상(ancestor) 요소에 대해 상대적으로 배치합니다. (position: relative를 잡는다.)
단, 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록(body 요소)을 기준으로 삼습니다.

<style>
	div.absolute{
    	position: absolute;
        top: 50px;
        right: 0;
        
    }
</style>

position: fixed;

고정 위치 방식은 뷰포트(viewport)를 기준으로 위치를 설정하는 방식이다.
웹 페이지가 스크롤 되어도 고정 위치로 지정된 요소는 항상 같은 곳에 위치하게 된다.
단, 요소의 조상 중 하나가 transform, perspective, filter 속성 중 어느 하나라도 none이 아니라면 뷰포트 대신 그 조상을 컨테이닝 블록으로 삼는다.

fixed와 transform
transform이 적용되면 해당 요소의 영역에 새로운 viewport가 설정되고 이러한 viewport에 자식 요소가 position: fixed 속성을 가질 때 영향을 받는다.

• 어떤 식으로 영향을 받는가?
  fixed 속성은 'background-attachment' 프로퍼티의 영향을 받는데, 대략 이해한 바에 따르면 바닥에 붙어있다고 생각하면 되겟다.
  transform은 한 layer 높이 쌓여있는데(appiled) 이 transform이 부모요소에 있으면 자식요소도 한 layer 높이 있는 것이다. fixed는 background 프로퍼티에 영향을 받고, transform은 떠있기 때문에 자식 태그에 fixed 속성이 적용되지 않는다.

position: sticky;

요소를 일반적인 문서 흐름에 따라 배치하고, 테이블 관련 요소를 포함해 가장 가까운, 스크롤 되는 조상과 표 관련 요소를 포함한 컨테이닝 블록(가장 가까운 블록 레벨 조상)을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다.
즉, sticky 박스는 scroll 박스에 고정한다.

offset 속성
기준이 되는 곳으로부터 얼마만큼 떨어졌는지 정한다.
scroll 박스가 offset 기준이 된다.

단, sticky 요소의 전체 부모요소 중에 overflow: hidden가 적용된 부모가 있으면 sticky가 안 먹습니다.
또한, 부모 노드의 height가 설정되어 있지 않으면 sticky 속성은 먹지 않습니다.

sticky와 overflow?
overflow 속성이 hidden일 경우 fixed좌표가 아닌 계속 static좌표에 위치한다.
즉, overflow: hidden 속성을 적용한 박스가 끼어들면 scroll 박스를 벗어나기 때문에 sticky 박스는 일반적인 흐름에 따릅니다. (즉, sticky 속성이 작동되지 않습니다.)

참고자료
1. https://developer.mozilla.org/ko/docs/Web/CSS/position
2. http://www.tcpschool.com/css/css_position_position
3. https://tech.lezhin.com/2019/03/20/css-sticky
4. https://www.w3.org/TR/css-transforms-1/#transform-rendering