[CSS] position : fixed, sticky와 width:inherit

이번 팀 프로젝트에서 헤더를 상단 고정하려고 fixed를 사용하니 크기가 부모 컴포넌트의 width가 아닌, browser의 width가 되는 것을 확인했다. 또한 가로 스크롤을 하면 같이 스크롤되지 않는 문제점이 발생했다.

 

전부터 해결하고 싶었던 내용인데, 오늘 해결하게 되어 정리하고 씻으러 가려고 한다.

 

`position: fixed` 와 `width: inherit`

위에서 말했듯이 `width: 100%`를 사용하면 브라우저의 전체 width가 된다. 부모 컴포넌트의 width를 사용하고 싶다면 `width: inherit`을 사용하면 된다. 여태 `inherit`은 언제 사용하는 것인지 궁금했는데, 이럴 때 쓰는 것이었다.

`position: fixed, width:100%`

`로그인|회원가입`을 회색 라인 밖으로 나가지 않게 하고싶었는데, 브라우저의 맨 오른쪽에 붙어버렸다.

 

여기서 `width: inherit`으로 바꿔주기만 하면 딱 원하는 위치로 변경된다.

`position: fixed, width: inherit`

 

`position: sticky`

그런데 위에도 문제점이 있다. 만약 브라우저를 좁게 만들면, `fixed`라는 속성처럼 스크롤은 되지 않는다.

`position: fixed, width:inherit` 맨 오른쪽으로 가로 스크롤

위처럼 딱 고정되어 스크롤도 먹히지 않는다.

 

이럴 때 `position: sticky`를 사용하면 원하는대로 상단에 고정되어 있지만 body와 같이 가로 스크롤이 되도록 만들 수 있다.

`position: sticky, width:inherit` 맨 오른쪽으로 가로 스크롤

`position: sticky`를 사용하면 `width`를 `inherit`으로 설정하지 않고 `100%`으로 설정해도 된다. 즉, `position: sticky`는 `position: static+absolute` 느낌으로 생각하면 될 것 같다. (`position`의 기본값은 `static`임을 참고하자.) 기본적으로 처음 정해준 위치에 있지만 특정한 위치에서 고정된다. 그런데 `width:100%`가 부모 컴포넌트를 따르니 적당한 비유인 것 같다.