position 속성은 웹 문서 안에서 자유롭게 요소들을 배치해 주는 속성으로 홈페이지를 html과 css로 작성할 때 필수적으로 사용 되는 css 속성 입니다.

position 에는 다음과 같은 5가지의 속성들이 있습니다.

static

position에 기본값이 되는 속성입니다. 해당 요소가 원래 있어야 할 위치에 그대로 존재하며 top, bottom, left, right 와 같은 속성을 사용할 수 없습니다. float 속성으로 좌우 배치는 가능합니다.

relative

요소의 원래 위치를 기준으로 배치합니다. 이때 요소의 원래 자리는 그대로 차지하며 top, bottom, left, right 와 같은 속성을 사용하여 배치할 수 있습니다.

absolute

가장 가까운, 포지셔닝이 된 (static 제외) 조상 요소를 기준으로 배치됩니다. 이때 글의 흐름에서 완전히 빠져서 요소의 원래 자리는 차지하지 않으며 top, bottom, left, right 와 같은 속성을 사용하여 배치할 수 있습니다. 만약 조상 요소에서 포지셔닝 된 요소가 없을 경우 document body의 위치를 기준으로 하여 좌표 프로퍼티 대로 위치합니다.

fixed

브라우저 화면을 기준으로 고정되는 배치 방식 입니다. 브라우저 창의 왼쪽 위 꼭지점을 원점으로 두고 좌표가 계산되며 한 번 배치되면 스크롤 하여도 그 위치에서 벗어나지 않습니다. 또한 absolute 속성 처럼 글의 흐름에서 완전히 빠져서 요소의 원래 자리는 차지하지 않습니다.

만약 이 속성을 이용해서 화면에 고정 되는 네비게이션 바를 만들려고 한다면, 원래 자리를 차지 하지 않는 속성 때문에 본문이 되는 영역이 의도치 않게 겹쳐 보이는 경우가 생길 수 있습니다.

sticky

최초엔 relative 속성과 동일하게 배치 됩니다. 브라우저를 스크롤 할 시 지정된 지점에 요소를 고정 시키는데요. 몇가지 규칙 들이 존재합니다.

1. sticky 속성은 해당 속성을 적용한 요소의 부모 요소 안에서만 움직입니다.
2. 또한, 부모 요소의 높이 값만큼 sticky가 고정 됩니다. (브라우저 에선 고정 되 보이지만 요소의 원래 위치를 기준으론 움직이는 거겠죠)
3. 부모 요소 중에 overflow 속성이 적용되어 있으면 제대로 작동되지 않습니다.

z-index

요소 위에 요소를 쌓을 때 쌓는 순서를 지정하는 속성입니다. 값이 적을 수록 아래에 쌓이고 값이 클 수록 값이 작은 요소 보다 위에 쌓입니다. z-index 값을 넣지 않으면 작성 순서대로 z-index를 부여합니다. 맨 처음 작성된 요소는 1이며 그 다음 작성된 요소들은 순서대로 2, 3 입니다.

다른 요소들보다 무조건 맨 앞에 표시해야 한다면 z-index: 999; 와 같은 큰 숫자를 적어 넣기도 합니다.