[이슈] Z-index

Z-index는 여러가지 컴포넌트가 겹쳐있을때 순서를 정하는 property이다

Z-index가 큰 순서대로 화면 최상단에 나타난다

예컨데, 배경화면 컴포넌트와 버튼을 겹치게하고 배경화면 컴포넌트의 z-index를 더 크게 주면, 버튼이 눌리지 않는다

배경화면이 앞서 렌더링되기 떄문이다

 

하지만 z-index의 Stacking Context(쌓임맥락)이 상당히 복잡해서 내 맘대로 정하기가 힘들었다

대략적으로 Stacking Context에 영향을 주는 요소를 보면

 

1) position

2) opacity나 transform

3) 부모요소

 

이렇게 세 가지 정도가 영향을 크게 끼치는 듯 한다

 

1)에 대해서는 z-index를 정하기 전에 항상 position을 정해주면 된다.  

2)에 대해서는 해당 컴포넌트의 position을 relative나 fixed로 바꿔주면 쉽게 해결된다

3)에 대해서는 또한 부모요소가 문제가 되는경우는, 부모요소에 더 높은 z-index값을 준다