[css]layout관련 속성1

https://developer.mozilla.org/en-US/docs/Web/CSS/position#types_of_positioning
https://naradesign.github.io/position-sticky.html

layout관련 속성 중에서도
position속성값들을 변경해보고 layout에 어떻게 나타나는지 확인해보았다.

static
문서의 일반적인 흐름에 따라 배치된다.
top, right, bottom, left 및 z-index속성은 영향을 주지 않는다.
이것이 default 값이다.

relative
문서의 일반 흐름에 따라 배치된 다음, top, right, bottom, left의 값에 기반해서 자기자신을 기준으로 오프셋된다.
오프셋은 다른 요소의 위치에 영향을 주지 않는다.
따라서 페이지 레이아웃의 요소에 지정된 공간의 위치는 static과 동일히다.

이 값은 z-index의 값이 auto가 아닐 때 새 stacking context를 생성한다.
table-*-group, table-row, table-column, table-cell, and table-caption및 요소 에 미치는 영향은 정의되지 않는다.

absolute
일반 문서 흐름에서 요소가 제거되고 페이지 레이아웃의 요소에 대한 공간이 생성되지 않는다.
가장 가까운 위치에 있는 positioned(static이 아닌) 조상(있는 경우)을 기준으로 위치가 지정된다.
그렇지 않으면 초기 포함 블록을 기준으로 배치됩니다.
최종 위치는 top, left, right, bottom값에 의해 결정된다.

이 값은 z-index의 값이 auto가 아닐 때 새 stacking context를 생성한다.
절대적으로 배치된 상자의 여백은 다른 여백과 함께 collapse(margin간의 결합)되지 않는다 .

fixed
일반 문서 흐름에서 요소가 제거되고 페이지 레이아웃의 요소에 대한 공간이 생성되지 않습니다.
뷰포트 에 의해 설정된 초기 컨테이닝 블록 에 상대적으로 배치됩니다.
단, 조상 중 하나에 transform, perspective, filter속성이 none이외의 것으로 설정되어 있거나
(CSS Transforms Spec 참조) will-change속성이 transform으로 설정된 경우는 예외입니다.
조상은 컨테이닝 블록으로 동작합니다.
(포함하는 블록 형성에 기여하는 perspective와 filter간에 브라우저 불일치가 있음에 유의하십시오)
최종 위치는 top, right, bottom, left의 값에 의해 결정된다 .

이 값은 항상 새로운 stacking context를 생성합니다.
인쇄된 문서에서 요소는 모든 페이지 에서 동일한 위치에 배치된다 .

sticky
요소는 문서의 정상적인 흐름에 따라 배치된다.
위, 오른쪽, 아래, 왼쪽 값을 기준으로 테이블 관련 요소를 포함하여 가장 가까운 스크롤링 조상 및 포함 블록
(가장 가까운 블록 수준 조상)을 기준으로 오프셋됩니다.
오프셋은 다른 요소의 위치에는 영향을 주지 않습니다.

이 값은 항상 새로운 스태킹 컨텍스트를 생성합니다.
sticky element는 실제로 스크롤되는 가장 가까운 조상이 아니더라도
"스크롤 메커니즘"(오버플로, 스크롤, 자동 또는 오버레이가 숨겨져 있을 때 생성됨)을 가진
가장 가까운 조상에 "고정"된다는 점에 유의하세요.