[Next/React] z-index가 작동하지 않는 경우

생각보다 많이 헤맸던 경우기도 한데 Next 혹은 React에서 z-index가 원하는대로 작동하지 않을 때가 있다.

처음에는 그저 position이 absolute일 경우에만 z-index가 적용되는 줄 알고 absolute를 남발했던 때도 있었다.

하지만 항상 absolute position만으로 컴포넌트들을 배치할 수는 없지 않은가.

React Native로 앱 작업을 자주 하다보니 맨날 헷갈리는데 React Native에서는 default position이 relative인 반면 React나 Next에서는 static이 초기값이다.

그러므로 React/Next로 작업을 할 때, position: ‘static’ (default)인 경우에는 z-index가 적용되지 않기에 이를 사용하고 싶은 경우에는 position을 relative나 absolute로 설정해주어야 한다.

하지만 재밌는 것은 React Native에서도 z-index를 적용해주고 싶으면 default가 relative여도 굳이 따로 선언해주어야 한다는 사실.

position: 'relative',
zIndex: 10