크롬 z-index? 문제
본문
<div z-index = 1>
<div 1-1 z-index=1>
<div 1-2 z-index=10></div>
<div 1-3 z-index= 9> 1-2의 배경(투명도적용)</div>
</div>
</div>
코드를 간략하게 썻습니다
현재 태그들 형태가 저렇게 되는데 1-2에 z-index가 가장높음에도 불구하고 "크롬"에서만 나오지않네요
익스플로어에서는 잘나옵니다. 오류뜨는것도 없는데 뭐가 문제일까요;
혹시 몰라 1-2의 z-index값을 높여봤지만 소용없었습니다.
반대로 1-1의 z-index 값을 없에면 1-2위에 1-3 뜨네요;
어떻게 해야할까요
답변 4
혹시 z-index 사용 시 position 값과 같이 사용해 주셨나요?
아래 코드로 테스트 해보니 익스플로러 크롬 전부 정상적인 z-index 값으로 확인됩니다.
참고하시면 될듯 합니다.
<style type="text/css">
.unit1{z-index:1; width:500px; height:500px; position:relative;}
.unit1-1{z-index:1; width:100%; height:100%; position:relative;}
.unit1-2{z-index:10; width:300px; height:300px; position:absolute; left:50%; top:50%; margin:-150px auto auto -150px; background:#000;}
.unit1-3{z-index:9; width:100%; height:100%; position:absolute; top:0px; left:0px; background:rgba(0,0,0,0.5);}
</style>
<div class="unit1">
<div class="unit1-1">
<div class="unit1-2"></div>
<div class="unit1-3"> 1-2의 배경(투명도적용)</div>
</div>
</div>
참고 URL
감사합니다 position 주니까 되네요 ㅎㅎ
<div 1-2 style="z-index:1"></div>
이런 식으로 작성해보세요.
두분다 좋은 답변입니다용~
그런데 말입니다.
<div id="parent"> <div id="child"></div> </div> <div id="other"></div>
만약 이러한 구조의 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 값" 만을 봤을때의 기준입니다.
그런데 실제는 그렇지 않죠.
z-index를 부모가 속성으로 가지고 있으면
자식은 부모의 것을 가져갑니다.
부모에 포함된 자식이라면
해당 부모안의 자식끼리 우선순위를 비교하는 것입니다.
parent안에 child말고 child2가 추가로 있다면
z-index를 비교합니다.
이미 부모 자체적으로 우선순위가 높기때문에 비교가 안됩니다.
질문자님께서 질문하신 구조는 자식인자끼리의 z-index 값입니다...
<div>속성안에 <div> 클래스의 우선권을 주는것이 아닌 부모인자간에 z-index값을 누가 우선이냐를 해주는부분입니다. 퍼블리싱을 다시하셔야할듯하네요
