내용 정리
- position은 static, relative, absolute, fixed, sticky가 있는데, 각각의 속성들은 element를 어디에 위치할지 결정하는 데에 사용합니다. static은 말 그대로 HTML에 작성된 순서대로 표시가 되고, 따라서 top, right, bottom, left 같은 위치 조정하는 속성값은 무시됩니다. relative는 원래 있던 위치를 기준으로 좌표를 지정할 수 있고, 보통은 자식 요소의 absolute 속성의 기준이 되는 요소로 지정할 때 주로 사용합니다. absolute는 자신이 아닌 상위 요소를 DOM트리를 따라 올라가다가 static이 아닌 첫 번째 상위 요소를 배치 기준으로 삼게 됩니다. fixed는 별도의 요소와는 무관하게 뷰포트를 기준으로 위치를 지정합니다. sticky는 static처럼 배치됐다가 스크롤이 어떤 임계점에 다다르면 fixed처럼 화면 일부에 고정할 수 있는 속성이라고 볼 수 있습니다.
꼬리 질문
- position의 초기값(initial value)은 뭔가요?
- 각각의 속성들은 어떤 경우에 사용했는지 설명해주세요
- fixed와 sticky를 구분 지어서 사용한 사례를 말씀해주세요
참고자료
평소엔 책과 영화와 음악을 좋아합니다. 보편적이고 보통사람들을 위한 서비스 개발을 꿈꾸고 있습니다.