z-index를 추가해도 안되요.

z-index속성을 element에 부여하면, 우선순위가 높게 되어 화면에 위에 위치하게 됩니다.
그러나 가끔 z-index를 아무리 높게 주어도 동작하지 않는 경우가 있습니다.

z-index를 추가해도 동작하지 않는 경우

1. 요소가 문서의 최상위 요소일 때 (즉, html 요소)
2. 요소의 position값이 static이 아니면서, z-index도 auto가 아닐 때
3. 요소의 opacity값이 1보다 작을 때
4. position:fixed일 때 (모바일 웹킷과 크롬22 이상)

일반적으로 position 속성을 요소들에 사용할때, position속성이 있는 모든 요소는 position속성이 없는 요소보다 앞에 나타나게 됩니다.
또한, z-index는 오직 position 속성이 있는 요소에서만 동작합니다.

쌓임 순서

1. 뿌리 root 요소
2. position 값이 있고 z-index값이 음수인 요소
3. position 값이 없는 요소
4. position 값이 있고, z-index값이 auto인 요소
5. position 값이 있고, z-index값이 양수인 요소

z-index가 음수이면서 position속성이 있는 요소는 가장 아래 쌓이게 됩니다.
즉 모든 요소보다 뒤에 있게 됩니다.
또한, z-index를 많이 주었는데도 앞으로 나오지 않는다면, 조상트리가 위 z-index를 추가해도 동작하지 않는 경우에 해당하는지 확인해야 합니다.

참고: https://mytory.net/archives/10997