Position 속성
Position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정합니다. position 속성 값에 따라서 위치를 정하는 기준이 달라지며 top, left, right, bottom 속성과 같이 사용됩니다.
속성 값으로는 static, realtive, absolute, fixed, sticky를 사용합니다.
static
position 속성의 기본값이며, 요소를 일반적인 문서 흐름에 따라 배치합니다.
realtive
요소의 원래 위치를 기준으로 상대적으로 배치합니다. 이때 요소의 원래 자리는 그대로 차지하고 있어 다른 요소에 영향을 주지 않습니다. top, bottom, left, right 속성을 이용해서 요소의 원래 위치 기준 이동하도록 설정할 수 있습니다.
absolute
가장 가까운 포지셔닝(static 이 아닌 position 속성 값)이 된 조상 요소를 기준으로 배치됩니다. 이때 글의 흐름에서 완전히 빠져서, 요소의 원래 자리는 차지하지 않습니다. 보통 상위 요소의 position 속성을 relative 로 지정하여 배치할 기준을 잡고 사용합니다.
fixed
브라우저 전체 화면을 기준으로 고정된 배치입니다. top, bottom, left, right 속성은 브라우저의 상, 하, 좌, 우에서 해당 요소가 얼마나 떨어져 있는지를 결정합니다. 글의 흐름에서 완전히 빠져서, 요소의 원래 자리는 차지하지 않습니다. 내비게이션을 만들 때 많이 사용하며 요소의 원래 자리를 차지하지 않기 때문에 요소간 겹치지 않도록 마진을 넣어주기도 합니다.
sticky
static 처럼 원래 위치에 배치해 있다가, 정해진 위치에 브라우저가 스크롤되면 그때부터 fixed처럼 고정되어 배치됩니다. 기본적으로는 static 처럼 배치하기 때문에 요소의 원래 자리를 차지합니다. top, bottom, left, right 설정이 필요하고, 가장 가까운 scroll되는 조상을 기준으로 배치 합니다.
z-index
- 앞뒤 순서를 정할 때 쓰는 값
- 순서이기 때문에 단위 없이 사용, 음수도 가능
- 값이 높을수록 화면에서 앞쪽, 값이 같은 경우에는 코드 아래쪽에 있는 요소가 앞쪽에 보임
쌓임 맥락
- z-index를 사용한 HTML 요소의 3차원 개념화
쌓임 맥락 생성 조건
- 문서의 루트 요소 <html>
- position이 absolute이거나 relative이고, z-index가 auto가 아닌 경우
- position이 fixed이거나 sticky인 경우
- 플렉스박스나 그리드의 자식 중 z-index가 auto가 아닌 경우
- opacity가 1보다 작은 요소
