position
position은 문서 상에 요소를 배치하는 방법을 정의한다.
position이 요소의 배치 방법을 결정하면, top, bottom, right, left가 최종 위치를 결정하는 방식이다.
position : 이렇게 배치
top : 윗면에서부터 ~만큼 떨어트리기
right: 오른쪽면에서부터 ~만큼 떨어트리기
bottom: 아랫면에서부터 ~만큼 떨어트리기
left: 왼쪽면에서부터 ~만큼 떨어트리기
속성값
- static : 기본값. 요소를 일반적인 문서 흐름에 따라 배치
- relative : 일반적인 문서 흐름에 따라 배치하되, 상하좌우 위치 값에 따라 오프셋 적용
- absolute : 일반적인 문서 흐름에서 제거, 가장 가까운 position 지정 요소에 대해 상대적으로 오프셋 적용
- fixed : 일반적인 문서 흐름에서 제거, 지정한 위치에 고정
- sticky : 일반적인 문서 흐름에 따라 배치, 스크롤이 존재하는 가장 가까운 요소에 대해 오프셋 적용
position : relative;
일반적인 문서 흐름에 따라 배치하되, 상하좌우 위치 값에 따라 오프셋 적용
postion : relative;
top : 100px; left : 100px;=> 일반적인 문서 흐름상의 위치에서, top에서 100px, left에서 100px 만큼 떨어진 위치
position : absolute;
일반적인 문서 흐름에서 제거, 가장 가까운 position 지정 요소에 대해 상대적으로 오프셋 적용
(position 지정 요소 : 상위 요소 중 position 속성값이 정의되어 있는 요소)
만약, 상위 요소 중 position 속성값이 정의된 요소가 하나도 없다면, 브라우저 자체에 대해 상대적인 위치를 계산하여 적용함.
position : fixed;
일반적인 문서 흐름에서 제거, 지정한 위치에 고정 (top/right/left/bottom)
position : sticky;
요소를 일반적인 문서 흐름에 따라 배치, 스크롤 되는 가장 가까운 상위 요소에 대해 오프셋 적용
=> 스크롤 이동으로 요소가 움직여도 sticky 요소는 고정된 상태를 유지한다.
ex) 만약 position: sticky; top:0px; 이라면,
일반적 문서 흐름에 따라 배치된 요소가 스크롤이 계속 밑으로 내려갈 때, 어느 시점에는 top:0px으로 고정되어 화면에서 '사라지지 않는다.'
