크롬 z-index? 문제

크롬 z-index? 문제

QA

크롬 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

https://websiting.kr/test/sir_20190214-1.html

두분다 좋은 답변입니다용~

그런데 말입니다.

 


<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를 비교합니다.

 

이미 부모 자체적으로 우선순위가 높기때문에 비교가 안됩니다.

 

 

<div>속성안에 <div> 클래스의 우선권을 주는것이 아닌 부모인자간에 z-index값을 누가 우선이냐를 해주는부분입니다. 퍼블리싱을 다시하셔야할듯하네요

답변을 작성하시기 전에 로그인 해주세요.
전체 123,127 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT