[CSS] position: absolute; 가 적용된 element의 z-index가 적용되지 않을때

position: absolute가 적용된 element에 z-index 값을 입력했는데도 
적용이 되지 않는 이슈가 있었다

다양한 이유가 있겠지만 나의 경우는
부모 element에 잘못된 z-index 값이 적용되어 있었다.

대략적인 구조는

<div class="parent">
   <div class="child">
     Hello World!
   </div>
</div>

이렇게 부모 요소 아래 자식 요소가 있고
이 자식 요소의 z-index가 작동하지 않는 이슈였다

CSS작성부를 살펴보니

.parent{
     position: relative;
	 z-index: 0;
}

.child{
    position: absolute;
    z-index: 2;
}

부모 요소에 z-index: 0;이 적용되어 있는 것이 문제였다.
누가 어떤 의도로 이렇게 작성했는진 모르겠지만.. 
이걸 지우고 나니.. 버그가 있었는데요.. 없어졌습니다..

absolute가 적용된 element의 z-index가 적용되지 않는 이슈는
대부분 부모클래스의 position 혹은 z-index 문제인 경우가 많은 것 같다

 

참고

https://stackoverflow.com/questions/14483589/z-index-not-working-with-position-absolute