Position

• position이란 HTML 태그의 위치를 지정해주는 속성입니다. position 속성을 이용해 우리는 페이지의 레이아웃을 결정할 수 있습니다.

position 종류

1. static
2. relative
3. absolute
4. fixed
5. sticky
   6.z-index

static

• position 속성의 default 값
• html에 쓴 태그 순으로 정상적인 흐름(normal flow)에 따라 위치가 지정되게 됩니다.
• top, right, bottom, left, z-index 속성을 적용할 수 없다.

relative

• 원래 자신의 위치(static)에서 상대적으로 이동하는 위치
• relative 속성은 원래의 자리를 인식하지만 left, right, top, bottom 속성을 이용해서 움직일때는 다른 콘텐츠들의 레이아웃에 영향을 미치지 않습니다.

absolute

• 즉 조상 중 가장 처음 position: static이 아닌 element 기준으로 위치를 잡는다! 또한 absolute를 선언 하면 해당 element의 display는 block으로 자동으로 바뀐다.
• relative와 다르게 주변 레이아웃에 영향을 미친다. absolute로 설정을 하면 element를 일반적인 문서 흐름에서 제거하기 때문에, 페이지 레이아웃에 공간을 따로 배정하지 않는다.
• 따라서 부모노드의 width가 정의되어 있지 않을때 자식 요소를absolute로 설정하면 부모의 크기도 작아져버린다

fixed

• fixed 속성은 아예 위치를 고정해버리는 것으로, viewport(browser의 전체 크기)가 기준이 된다. 기존에 포함되어 있던 상자(box)에서 완전히 벗어나서 전체 페이지 상에서 position이 진행이 된다. 즉 scroll을 해도 화면 상에 고정된다.
• 위치를 지정한 부모를 기준으로 잡는 absolute와는 다르게 (0,0) 위치에서 부터 시작한다!

sticky

• sticky도 viewport를 기준으로 동작한다. fixed와의 차이점은, element가 viewport안에 있을 시에는 relative와 같이 동작하지만, viewport에서 사라지는 순간 fixed처럼 동작하며 설정한 위치에 고정된다.
• 즉 sticky 속성은 relative처럼 동작하다가 스크롤이 특정 지점에 도달하면 element를 고정시킨다.

z-index

• position을 통해 요소의 위치를 변경하다보면 요소와 요소가 겹쳐보이는 일이 발생합니다. 이때 어떤 요소가 더 위로 나타나게 할지 결정할때 사용하는게 바로 z-index 속성입니다.
• 오직 static을 제외한 position 속성값이 적용된 요소의 Z축 순서를 결정할 수 있으며, z-index 값이 더 큰 요소가 값이 작은 요소의 위를 덮어버리게 됩니다.
• 부모가 z-index를 높여 자식 앞으로 나올 수 없습니다. 자식은 z-index를 낮춰 부모 뒤로 가는 것은 가능합니다.