CSS position: fixed가 항상 화면 기준이 아닌 이유와 예외 상황

position: fixed는 일반적으로 화면(viewport)을 기준으로 동작하지만, 특정 상황에서는 예상과 다르게 동작할 수 있습니다. 이 글에서는 position: fixed의 기본 동작과 예외 상황을 살펴보겠습니다.

기본 동작

position: fixed는 화면을 기준으로 요소를 고정합니다. 스크롤을 하더라도 요소는 제자리에서 움직이지 않습니다. 다음은 기본적인 예제입니다.

.fixed-element {
    position: fixed;
    top: 10px;
    left: 10px;
}

위 코드를 적용하면, .fixed-element는 화면의 좌측 상단에서 항상 10px 떨어진 위치에 고정됩니다.

예외 상황

특정 CSS 속성이나 환경에서는 fixed가 화면(viewport)을 기준으로 동작하지 않을 수 있습니다.

1. transform, perspective, filter의 영향을 받을 때
fixed 요소가 transform, perspective, 또는 filter 속성이 적용된 부모 요소의 자식일 경우, 화면이 아닌 해당 부모 요소를 기준으로 동작합니다.

.parent {
    transform: translate(0, 0);
}

.child {
    position: fixed;
    top: 10px;
    left: 10px;
}

이 경우, .child는 부모 요소 .parent를 기준으로 위치가 고정됩니다. 이는 fixed가 viewport 대신 부모의 containing block에 영향을 받기 때문입니다.

2. 모바일 환경에서의 특수 동작
모바일 브라우저에서는 fixed가 예상과 다르게 동작하는 경우가 종종 있습니다.
예를 들어, 소프트 키보드가 나타나거나 화면 크기가 변경될 때 fixed 요소가 재배치되지 않는 문제가 발생할 수 있습니다.

마무리

position: fixed는 일반적으로 화면을 기준으로 동작하지만, transform, perspective, filter 속성의 영향을 받을 경우 부모 요소를 기준으로 동작할 수 있습니다. 이러한 특성을 이해하고 CSS를 작성하면 예상치 못한 동작을 방지할 수 있습니다.

웹 개발에서 작은 차이가 큰 문제를 초래할 수 있으므로, 레이아웃 설계 시 이러한 예외 상황을 고려하는 것이 중요합니다.

출처: https://developer.mozilla.org/ko/docs/Web/CSS/position#fixed