• z-index와 흐름에 이해.

z-index란 말 그대로 x,y값 말고 추가적인 z값을 정해주는 값이다 x ,y 값이 2차원 평면에 좌측, 상단 점 값을 정하는 값이라면, z-index는 컴포넌트가 쌓이는 순서를 결정한다. z-index값이 높은 컴포넌트가 위에 쌓인다. 하지만 z-index가 말처럼 z-index값만 보고 어떤 컴포넌트가 위에쌓이는지 결정하는 것은 아니라, 개발자가 이부분에서 애를 쓰는 경우가 많다. z-index 말고 여러가지가 컴포넌트에 순서를 결정한다. 그 후 z-index값을 이용하여 2번째로 순서를 정한다. 즉, 어떻게 보면 z-index는 추가적인 z-index를 정하는 속성이다. html에서 컴포넌트에 순서를 정하는것은 마크업구조이다. 마크업구조가 위에있는것 보다 아래 있는것이 더 위에있다. 여기까지는 누구나 알고 있는 사실이다. 하지만 그 후 바로 z-index값을 보고 컴포넌트에 순서를 정하는것은 아니다. z-index전에 css속성에 position값을 본다. position값이 존재한다면 여기서 흐름이 만들어진다. 흐름이 만들어지는 순간, z-index값이 먹히지 않는 경우가 있다. 그 이유는 다음과 같다. 예를들면 dropdown같은 컴포넌트는 position을 absoulte로 하고, 그 위에 상위(부모)컴포넌트는 position을 relative로 하는 것이 일반적이다. 이렇게 하는 순간 문제를 초래할수 있다. 방금 만들어진 dropdown컴포넌트는 부모와 같은 레벨에 dom위에 위치할 수 없고 항상 가려지게 된다. 이 문제가 흐름에 문제인것이다. 이러한 문제를 해결하기위해서는 한단계 위에서 relative position을 지정하면 해결 할 수 있다.