css position 알아보자

css는 웹 개발에 있어서 필수적인 요소이다.

그 중에서 position 속성이 조금 헷갈려서 정리하고자 글을 작성하게 되었다.

position 속성에는 5가지가 있다.

1. static
2. relative
3. absolute
4. fixed
5. sticky

static

position 속성의 기본값으로 문서의 일반적인 흐름에 따라 배치된다.
top, right, bottom, left는 이 속성에 영향을 미치지 않음

relative

relative는 static과 똑같이 문서의 일반적인 흐름에 따라 배치된다.
하지만 top, right, bottom, left를 이용해 이동이 가능함

absolute

parent의 position 요소가 static이 아닌 element를 기준으로 배치된다.
parent 요소 중에 position이 없다면 초기 컨테이너 블록을 기준으로 배치.

※ dropdown 메뉴, 툴팁 구현에 사용

fixed

fixed로 설정하면 viewport(브라우저 창)을 기준으로 위치가 고정된다.
스크롤을 해도 같은 위치에 위치함.

※ modal 창 구현에 사용

sticky

sticky는 relative와 fixed의 하이브리드이다. 특정 임계점 까지는 일반 흐름에 따라 동작하다가 임계점에 도달하면 그 위치에 고정이 되는 식이다.

※ 스크롤에 따라 움직이는 헤더 구현

주의사항

• 성능 최적화를 위해 fixed나 absolute 사용은 최소화 해야함
• 반응형 디자인에서는 position 값을 동적으로 변경해야 할 수 있음