position 속성

CSS에서 position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정합니다. 많은 경우, position 속성은 요소의 정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용된다.

relative

요소를 구체적인 목표에 따라 배치하고, 자기 자신을 기준 top으로 , right, bottom, left의 값에 따라 오프셋을 적용한다. offset은 다른 요소에 영향을 미치고 있음을 나타낸다.

따라서 페이지 레이아웃에서 요소가 넓은 공간은 static일 때와 같다. z-index의 값이 auto사용자 지정되면 새로운 체결 임차인 을 생성합니다. table-*-group, table-row, table-column, table-cell, table-caption요소에 적용했을 때의 방식 작동은 정의되지 않는다.

체결 임차인(쌓임 맥락)
쌓임 맥락(stacking context)은 가상의 Z축을 사용한 HTML 요소의 3차원 개념화이다.
Z축은 사용자 기준이며, 사용자는 뷰포트 혹은 웹페이지를 바라보고 있을 것으로 가정한다.
각각의 HTML 요소는 자신의 속성에 따른 우선순위를 사용해 3차원 공간을 차지한다.

offset이란 떨어진 정도를말한다.

absolute

요소를 일반적인 문서에서 제거하고, 페이지 레이아웃에 공간도 배치하지 않는다.
대신에 가장 근접한 위치 보호 장치에 대해 상대적으로 배치한다.
단, 상위 중 위치 보호 요소가 원형 초기 컨테이 블록닝 을 기준으로 삼는다. 최종 위치는 top, right, bottom, left값이 인증한다.

z-index의 값이 auto사용자 지정되면 새로운 체결 임차인 을 생성한다.
완전한 위치 확인 요소의 축구는 서로 상쇄되지 않는다.

컨테이닝 블록이란
요소의 위치와 크기를 지정하는 데 사용하는 블록을 의미한다.
position: absoulte;나 font-size: 2em;같은 값을 결정하는 데 기준이 필요한 속성들의 기준
즉, 대상을 결정하는 데 사용하는 것이 컨테이닝 블록

fixed

요소를 일반적인 문서에서 제거하고, 페이지 레이아웃에 공간도 배치하지 않는다.
대신 포트 보기 의 초기 컨테이닝 블록을 기준으로 삼아 배치한다.
단, 요소의 조상 중 하나가 transform, perspective, filter소유권 중 어느 하나라도 none이 청구( CSS Transforms 명세 참조) 뷰포트 대신 그 조상을 컨테이닝 블록으로 삼는다.
( perspective와 filter의 경우 브라우저 관측치가 표시에 유의) 최종 위치는 top, right, bottom, left값이 표시된다.

이 값은 항상 새로운 축적임을 생성한다.
문서를 인쇄할 수 있는 해당 요소가 모든 페이지의 위치에 된다.