CSS

Staking Context와 Position, z-index 그리고 React Portal

서론 Fe 개발자라면 한번쯤은 CSS에서 position: fixed 요소가 스크롤을 따라오지 않거나 z-index가 제대로 먹히지 않는 현상을 경험했을 것이다. 대부분의 개발자는 “z-index를 더 높이면 되겠지”라고 생각하지만, 실제로는 해결되지 않는다. 이 문제의 원인은 stacking context이며, 특히 transform, opacity, filter 같은 속성이 새로운 stacking context를 만들기 때문이다.Stacking Context란 Stacking Context는 HTML element들을 3차원적으로 바라보는 개념이다. 우리가 평소 생각하는 X축(가로)과 Y축(세로)에 더해 Z축(깊이)이 추가된다고 이해하면 된다. 이 Z축이 바로 어떤 element가 다른 요소 위에, ..