position 을 어떻게 사용하는지 알려주세요

글의 목적

• 면접에서 질문을 받았을 때를 대비하여 대답을 정리한다.

본문

postion의 경우 css에서 중요한 파트 중 하나인 레이아웃을 결정하는 속성입니다.

웹문서는 블럭요소와 인라인 요소로 구분되고 블럭요소들은 가로로 차지할 수 있는 부분을 모두 차지하며 차곡차곡 위에서 아래로 쌓여갑니다.

그래서 특정 박스모델을 웹의 어느 위치에 놓기 위해서는 인라인 요소를 이용하고 마진을 많이 주는 방식으로 놓아야 했습니다.

하지만 웹이 발전하며 헤더나 사이드바 처럼 스크롤에 관계없이 계속 고정시켜두고 싶은 것과, 웹의 구성에서 벗어나 자유로운 위치에 놓고싶은 디자인이 생겼습니다.

이런 부분을 개발자들은 position으로 해결했습니다.

postion을 사용한 요소는 우선 웹의 기본적인 구성에서 벗어나게 됩니다.

이때 값으로 대표적으로 relative, absolute, fixed를 쓸 수 있는데 relative는 웹의 기본위치의 구속에서는 벗어나지만 자신의 원래 기본위치에 존재하게 됩니다.

여기서 top이나 left값을 주면 자신의 기본위치를 기준으로 움직이게 됩니다.

absolute같은 경우는 자신의 상위에 있는 postion으로 기본 구성을 벗어난 요소를 찾고 그 요소를 기준으로 위치를 움직일 수 있습니다.

즉, 자신의 상위에 있는 relative나 absolute, fixed를 찾습니다. (보통은 컨테이너를 relative로 잡고 특정요소는 abolute로 위치를 잡습니다.)

fixed의 경우 absolute와 비슷하지만 fixed는 무조건 viewport를 기준으로 배치됩니다.

즉 우리가 아무리 스크롤을 내려도 viewport는 고정이기 때문에 특정위치에 계속 존재해야하는 플로팅버튼을 만들기에 좋습니다.