내가 알아야 할 z- 색인에 관한 이상한 규칙은 무엇입니까?

Question

죄송합니다. 완전한 코드를 게시 할 수 없으며 독점적 인 작업을하고 있습니다. 기본적으로 나는 Z- 인덱스 6을 가진 DIV가 Z- 인덱스 5를 갖는 오버레이 DIV에 의해 차단되고있는 문제가 있습니다. 이런 일이 일어날 수있는 시나리오가 있습니까? 왜 이런 일이 일어나고 있는지 알아 내려고 노력하고 있습니다. 그것은 단지 말이되지 않습니다. 중첩 DIV와 관련이 있거나 CSS position 일 가능성이 있습니까?

나는 모호한 점에 대해 사과드립니다. JSFiddle에서 다시 만들려고했지만 불행히도 예상대로 작동합니다. 실제 코드 만이 불안정합니다.

구조 :

<div id="window"> 
    <div id="wall"> 
     <div class="box" /><div class="box" /> .... many boxes 
    </div> 
</div> 
<div id="overlay" /> 

CSS :

이

 $('<div id="overlay"></div>').css({ 
      'left': $('#window').position().left + 'px', 
      'top': $('#window').position().top + 'px', 
      'width': $('#window').width() + 'px', 
      'height': $('#window').height() + 'px', 
      'opacity': 0.8 
     }).appendTo('body'); 

상자 중 하나가 Z-을 가지고 있지만 :

#window { 
    position: relative; 
    width: 960px; 
    height: 700px; 
    overflow: hidden; 
    background: #666; 
} 

#wall { 
    position: relative; 
    width: 1640px; 
    height: 1600px; 
    -webkit-perspective: 2000; 
} 

#overlay { 
    position: absolute; 
    z-index: 5; 
    background: #000; 
} 

.box { 
    left: 0px; 
    top: 0px; 
    position: absolute; 
    width: 228px; 
    height: 228px; 
    color: #fff; 
    font-family: Helvetica, Arial, sans-serif; 
    font-weight: bold; 
    font-size: 0.8em; 
    -webkit-transform-style: preserve-3d; 
    z-index: 4; 
    cursor: pointer; 
} 

오버레이 크기는 특정 이벤트에 jQuery를 통해 설정된다 인덱스 6, 오버레이 5 일 때, 오버레이는 여전히 상기 박스 위에있다.

오버레이는 창 위로 이동해야하지만 해당 상자 중 하나를 통과시킵니다.

왜이 일을 JSFiddle 작동하지만 내 실제 코드 않습니다! http://jsfiddle.net/csaltyj/2gzTc/

Answer 1

z-index은 position:relative, absolute, 또는 fixed와 요소에서 작동합니다. 그것은 많은 사람들을 여행하는 것처럼 보입니다.

또한 자녀는 부모보다 아래에있을 수 없습니다. This example 또한 Jsfiddle에 나와 있습니다.

z-index 대부분의 경우 문서 자체가 부모에 상대적 아니라 : 예를 바탕으로

당신은이 문제는 데있어 분명했다. 한 형제 자매의 z-index이 다른 형제 자매보다 낮 으면, 형제 자매의 첫 번째 형제 자매에 대해 변경 한 것은 형제 자매 형제보다 위 이동시킬 수 없습니다. 관심이 있으시면 stacking context에 대해 자세히 알아보십시오. 빨간색에서 크로스

은 당신이 원하는 무엇이며, 마크 업, 그 작은 상자는 큰 상자의 자녀 고려 (CSS 불가능 : 여기

는 시각이다 이는 다음과 같습니다

<div class="one"> 
</div> 
<div class="two"> 
    <div> I can never be above "one", if my parent "two" isn't. </div> 
</div> 

해결책은 벽 내부의 "오버레이"를 이동하거나 더 나은 아직 (이에 적용되는 요소의 자식으로 렌더링되는) 의사 요소를 사용하는 것입니다, 오버레이가 오버레이 div가 아무런 의미 적 의미를 추가하지 않는다면 CSS의 영역에 남아 있어야합니다.