z-index의 우선순위가 궁금합니다.

Question

z-index의 값이 큰 순서대로 화면에 가장 먼저 나타나는거는 알고있습니다.

만약 이러한 구조의 HTML태그가 있다고 가정하고$("#other").css({"z-index":"1000","display":"none"}); $("#parent").css("z-index","999"); $("#child").css("z-index","1010");와 같이 z-index값을 설정하였습니다. z-index값으로만 봤을때에는 parent 위에 child가 겹쳐져서 위로 올라와야 하는것이고중간에 other의 display가 block되어버리면 parent -> other -> child 순서로 겹쳐져서 보여야하는 것이죠?"z-index 값" 만을 봤을때의 기준입니다 ! 제가 원하는 내용이기도 하구요 그런데 실제로 테스트를 해보니 child에 아무리 z-index값을 설정해도 부모인 parent의 z-index값을 가져가는 것 같더라구요....(Chrome 디버그 창에서 확인해본 결과 style inline 속성에 1010이라는 값이 설정은 되어있지만 실제 적용된건 부모인 parent의 z-index값이 먹힌듯) 혹시 z-index를 잘못 이해하고 있는건가요ㅠㅠ?방법이 있다면 알려주세요 !

니플 · Accepted Answer

z-index를 부모가 속성으로 가지고 있으면자식을 부모의 것을 가져갑니다. 부모에 포함된 자식이라면해당 부모안의 자식끼리 우선순위를 비교하는 것입니다. parent안에 child말고 child2가 추가로 있다면z-index를 비교합니다. 위에 올려주신 것은 이미 틀(부모) 자체적으로 우선순위가 높기때문에 비교가 안됩니다.

샴푸한잔 · Answer

신입 // 감사합니다!! 애초에 안되는 것을 계속 시도하고있었네요...ㅋㅋㅋ

z-index의 우선순위가 궁금합니다.

2개의 답변

Q&A 목록