[css] fixed를 중첩할 경우 조심해야 할 점

모바일 웹앱 프로젝트 도중 아래에서 위로 올라오는 drawer 컴포넌트를 개발할 일이 생겼다.

그런데 내부부터 만들고자 해서, 동작하지 않는 css를 냅뒀었다.

상황은 다음과 같다.

• 가장 외부에 css 애니메이션을 적용해야 하는것을 일단 냅뒀다.
• 그러다보니 내부 div에 transition css 속성을 그대로 냅뒀다.
• 가장 외부는 레이아웃을 덮기 위한 fixed 요소가 존재한다.
• 그리고 drawer 내부에는 fixed 속성을 적용한 헤더가 존재한다.

드로어 컨텍스트가 배경을 덮어야 하니 제일 외부에 fixed를 둔다

그 다음 내부에 transform을 건 div를 둔다.

그 다음 드로어 내부 헤더에 fixed를 건다.

그러면 어떻게 될까...?

아래에서 직접 확인하자.

해당 상황을 재현한 예시

React App

이유는 무엇일까?

답은 모질라 문서에 있다.

https://developer.mozilla.org/en-US/docs/Web/CSS/position

position - CSS: Cascading Style Sheets | MDN

조상 중 하나가 transform, perspective 또는 filter 속성이 none이 아닌 다른 것으로 설정되어 있는 경우
(CSS Transforms Spec)참조 해당 조상은 fixed 요소의 containing block을 생성합니다.
따라서 fixed 요소의 위치는 오직 top, left, right, bottom에 의해서만 결정됩니다.
또한 fixed 요소는 새로운 쌓임 맥락을 생성합니다.

이렇게 동작하는 원인은 별 거 없다. 해당 css 애트리뷰트의 사양 때문이다.

HTML 네임스페이스에서 transform에 대해 none 이외의 값을 사용하면 스택 컨텍스트와 포함 블록이 모두 생성됩니다.
객체는 fixed 하위 항목에 대한 포함 블록 역할을 합니다.

더 자세한 설명은 아래 링크를 참조한다.

https://stackoverflow.com/questions/15194313/transform3d-not-working-with-position-fixed-children/15256339#15256339

 

사실 sticky로 바꾸는 꼼수로 해결하고 넘어갔지만,

위와 같은 경우를 조심해야겠다.