[TIL 02] CSS Layout: Position

Position

CSS의 position 속성은 HTML 요소들의 위치를 설정하는 데 사용됩니다.

position 속성의 값으로는 static, relative, absolute, fixed, sticky 이렇게 다섯 가지가 있습니다.

요소를 배치하는 방법의 유형이며, 각 유형에 따라 top, bottom, left, right 속성으로 위치를 조절할 수 있습니다.

1. static

HTML 요소의 기본 position 값은 static입니다. position 속성을 주지 않으면 디폴트로 static이라는 속성값이 적용되는 것입니다. (기본적으로 static이라 따로 써주지 않아도 됩니다.) element가 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓입니다.

2. relative

static과 마찬가지로 element가 문서의 일반적인 흐름에 따라 배치가 됩니다. static과의 차이점은 element가 자신의 static 위치에서 top, bottom, left, right와 같은 속성에 의한 상대적인(relative) 위치에 배치된다는 점입니다.

• relative를 사용시 element가 겹쳐지게도 보일 수 있으므로 주의가 필요합니다.

3. absolute

absolute는 element가 문서의 일반적인 흐름을 따르지 않습니다. 대신 가장 가까운 위치에 있는 조상 element에 대해 상대적 위치로 배치됩니다. 조상 element가 없으면 문서 본문(body)을 기준으로 삼고 페이지 스크롤에 따라 움직입니다.

4. fixed

fixed 역시 absolute와 마찬가지로 element가 문서의 일반적인 흐름에서 제거됩니다. 대신, 스크린의 뷰포트(viewport)를 기준으로 한 위치에 배치됩니다. 즉, 스크롤되어도 움직이지 않는 고정된 자리를 갖게 됩니다.

웹 페이지를 방문해보면 로고나 선택박스들이 스크롤을 아래로 내려도 따라다니는 것을 보신적이 있으실 겁니다. 이러한 기능을 fixed를 통해 구현할 수 있습니다.

5. sticky

sticky는 element가 문서의 일반적인 흐름에 따라 배치되며 top, bottom, left, right 속성들의 값을 기준으로 flow root 및 해당 element를 포함하는 containing block에 대한 상대적(relative) 위치에 배치됩니다.
그래서 sticky로 position을 지정했는데 top, bottom, left, right 속성이 주어지지 않으면 static으로 배치되는 위치와 같습니다.
sticky는 relative와 마찬가지로 다른 요소들에 영향을 주지 않는 특징을 가집니다.

fixed 와 sticky의 차이점?

fixed와 sticky 둘 다 스크롤을 하더라도 보여지는 공통점을 가지고 있는데요. 이 두 position의 차이점은 fixed는 문서의 흐름을 따르지 않고 뷰포트를 기준으로 배치가 되는 반면 sticky는 문서의 흐름을 따르면서 containing box를 기준으로 상대적인 위치에 배치됩니다.

즉, fixed를 쓰면 요소들이 겹쳐보일 수 있는 상황이 나올 수 있는 반면 sticky를 쓰면 그러한 상황을 예방할 수 있습니다.