z-index 자주들 사용하시죠?
전 비교적 자주 사용하는 편이라 과거에는 주먹구구식으로 사용하다가 몇달 전에야 약간 돌깨짐을 얻었습니다.

z-index 활용을 잘 못하는 분들이 있는거 같아 한번 글 올려야지 하면서도 미루다 이제야 올립니다.

과거에 제가 주워들은 정보는 z-index는 "가급적 낮은 값으로 설정하라"라는 한가지였습니다.
차후에 높은값을 설정해야 하는 경우가 생길 수 있기에....

그런데 몇달전 우연히 돌깨짐을 얻은것이 가급적 높은값 설정이고 낮은값 설정이고 고민할 필요없이 z-index 값 설정은 간단하더군요.

쉽게 말해서 xe같은 경우( 다른 사이트의 구조도 별반 차이가 없을겁니다) header와 body, footer 부분으로 크게 나눠질겁니다.
그럼 이건 z-index값을 성정하지 않을때 자연스럽게 순차적으로 header을 가장 밑 레이어로 다음 body footer 순으로 레이어를 위로 배열해서 보여줍니다.
그런데 이런 순서가 표현하고자 하는 형태를 보여주기 힘든 상황이 생기기에 만들어 진 것이 강제적으로 레이어의 순서를 바꾸는 z-index가 아닌가 싶고요. html 구조상 header 부터 footer 순으로 흐르더라도 header 부터 footer까지 순서적으로 z-index 값을 3~1로 잡아 버린다면 header을 가장 위 레이어로 인식시키게 만드는 거죠.

간단한 상황으로 설명하자면 header의 메인 메뉴가 길게 내려와서 body 부분까지 내려와 버리면 body 부분까지 내려온 부분은 안보이게 되는 상황이 생깁니다.
이건 html에서 header보다 body부분이 나중에 배열되어 있으면서 body의 레이어가 header의 레이어보다 높은 위치에 인식되면서 메뉴를 덮어버리기 때문인데요.
이때 body에 z-index를 1로 설정하고 header의 z-index를 2로 설정한다면 header의 레이어가 body보다 높게 설정되면서 메뉴가 다 보이게 되는겁니다.
포토샵에서 레이어 위치와 비슷하게 생각하시면 됩니다.

그리고 그것과 똑같이 header(header의 index값이 1000이라 하더라도 이건 header와 같은 배열의 footer나 body와의 z-index값입니다) 안에서 z-index값을 설정하고 싶다면 그 안에서 레이어의 순서를 바꾸고 싶은 부분을 z-index:1 로 시작해서 값을 설정하시면 됩니다.

그리고 위에 가급적 낮은 값으로 설정하라기 보다는 1부터 순차적으로 값을 적용시키는게 나중에 아~~ 이게 이런순서로 레이어 위치를 바꿨구나 쉽게 파악하게 되겠지요.

z-index값을 설정하실때 가장 중요한 부분은 만약 xe라는 div가 있다면 그 div의 첫째 아들간에 z-index값은 첫째 아들간의 z-index 값이지 이건 그 손자까지 영향을 주는게 아니라는 겁니다. 그 손자는 직계아버지 아들 안에서 다시 z-index값을 가지고 나누시면 됩니다.