CSS에서 포지션을 통해 레이아웃을 배치하거나 요소의 위치를 결정할 수 있습니다.
포지션이 가질 수 있는 속성값은 다음과 같습니다.
- static
포지션의 속성을 지정하지 않았을 때 가지는 기본값입니다.
- relative
아무 설정도 주지 않았을 때의 기본값인 static을 기준으로 상하좌우 이동을 지정할 수 있습니다. 음수, 혹은 양수의 값으로 움직일 수 있습니다.
또한 일정한 공간을 차지하게 됩니다.
- absolute
relative가 static의 값을 기준으로 움직였다면, absolute는 static이 아닌 부모 element(상위 엘리먼트)를 기준으로 움직입니다. 이때 상위 엘리먼트가 relative 값을 갖든 absolute값을 갖든 상관은 없습니다.
또한 일정한 공간을 차지하지 않고, 전혀 다른 새로운 레이어에서 움직이는 것 처럼 보입니다.
- fixed
페이지 상의 좌표나 다른 요소를 기준으로 잡는 relative, absolute 와 달리, 화면을 기준으로 위치를 지정합니다. 스크롤을 이동해도 화면을 기준으로 같은 자리를 차지하게 됩니다.
DUM) Z-index
여러 요소들이 겹쳐서 위치하게 될 때, Z-index가 높을수록 더 상위의 레이어로 올라오게 됩니다. 즉, Z-index의 값이 높은 것이 겹쳤을 때 위에 보이는 요소가 됩니다.
