Position
위의 그림처럼 생긴 html요소가 있다고 할 때 div태그의 위치를 변경하고싶으면 어떻게해야할까?
1번째 div를 html요소의 오른쪽 위에 배치한다던가 2번째 div를 body요소의 왼쪽 위에 배치하는것처럼 요소의 위치를 변경하고싶을 때 position프로퍼티를 사용하여 위치를 조정한다.
기본적으로 position의 default는 static이 적용되어있고, 다른 값으로는 absolute, relative, fixed, sticky가 있다.
fixed
fixed는 뷰포트를 기준으로 요소를 배치해준다.
뷰포트는 현재 웹페이지에서 보이는 부분을 의미하며 브라우저 창으로 이해하면 된다.
또한 fixed를 설정한 요소는 마치 인라인블록처럼 동작하며, 해당 요소가 block-level요소든 inline요소든 상관없이 동작한다.
absolute
fixed와 마찬가지로 일반적인 문서 대열에서 제거되지만 배치 컨텍스트에서 차이가 생긴다.
absolute는 가장 가까운 position이 지정된 부모요소를 기준으로 배치되거나, position이 지정된 부모요소가 없을 경우 뷰포트를 기준으로 배치 컨텍스트가 지정된다.
relative
relative는 일반적인 문서 대열에서 제거되지않고 해당 요소 자체가 배치컨텍스트이다.
따라서 원래 있어야 할 위치를 기준으로 요소를 이동시킬 수 있게된다.
sticky
sticky는 relative와 fixed의 조합이라 할 수 있다.
relative처럼 일반적인 문서 대열에서 제거되지 않지만 설정한 위치에 도달하면 fixed처럼 뷰포트에 고정되어 스크롤하여도 그 위치에 고정되어있다.
하지만 부모요소의 끝부분에 도달하면 고정을 멈추게된다.
z-index
지금까지 가로는 x축, 세로는 y축을 이용해왔는데 요소를 덮는 시점에서는 z축을 사용하여 요소를 배치해야한다.
z-index를 사용하면 요소의 z축을 조절할 수 있다.
z-index는 position의 기본값인 static에서는 조작할 수 없으며, 반드시 position을 변경해주어야만 사용가능하다.
음수값과 양수값 모두 사용할 수 있으며, 숫자가 클수록 요소가 더 위에 표시된다.
기본값은 0이며, z-index가 같은 경우 html에서의 순서에 따라 요소의 배치가 결정된다.
스택 컨텍스트
스택 컨텍스트는 CSS에서 요소의 쌓임 순서를 결정하는 시스템이다.
z-index를 사용하여 요소의 z축을 조절할 수 있는데, 자식 요소의 z-index는 아무리 커도 부모 요소의 z-index의 범위 내에 놓인다.
예를들어 위의 그림과 같이 요소들이 배치되어있다고 해보자.
contact-us의 z-index를 1, image-2의 z-index를 100으로 변경하면 어떻게될까?
image-2의 z-index가 contact-us보다 크기때문에 맨 앞으로 올것같다.
하지만 실제로는 다음 그림과 같이 image-1, image-3보다는 앞에 오지만 contact-us보다는 뒤에 있게된다.
왜냐하면 image-1,2,3의 부모 요소인 headline의 z-index는 따로 설정하지 않아서 0인데, 부모의 요소가 contact-us보다 뒤에 있기 때문에 자식 요소인 image-2는 항상 contact-us보다 뒤에 있을수밖에 없다.
