[CSS] position: fixed vs absolute

검색 동기

모달 창 구현 중 모달 뒤를 덮는 어두운 background가 화면 스크롤 시 잘리는 문제가 생겼다. 이때 background의 position 속성을 absolute에서 fixed로 변경했더니 해결됐는데, 왜 그런지 몰라서 찾아보기로 했다.

Absolute

• 자신의 조상 요소 중 가장 가까운 static이 아닌 요소를 기준으로 위치를 설정한다. 그런 조상이 없는 경우 최상위 조상(html)이 기준이 된다.
• 따라서 조상 요소가 움직인다면, 즉 ‘웹페이지 기준’ 제자리에 있거나 한다면, 스크롤에 따라 움직일 수 있다.

Fixed

• 브라우저 창(viewport)을 기준으로 위치를 설정한다. 그러므로 스크롤을 해도 해당 요소는 제자리에 있다.

결론

둘 다 요소 크기는 브라우저 창으로 동일하나, fixed일 때만 브라우저 창 기준이므로 전부 다 가려지는 것이었다.

여전히 모르겠는 것

그런데… height, width 모두 100%를 주었는데 왜 부모 요소만큼 커지지 않는 걸까? 원래대로라면 브라우저 창이 아니라 부모 요소의 크기가 나와야 하는 거 아닌가?