예기치 않은 z- 인덱스 스태킹 동작

Question

기본적으로 이미지가 페이지와 겹치지 않도록 내 사이트의 #page_container 뒤에 겹침 모서리를 넣으려고합니다.

라이브 예 : http://jsfiddle.net/xBwQp/15/

HTML :

<div id="page_container"> 
    <div id="banner_wrapper"> 
     <img id="banner_image" src="http://placehold.it/350x150" /> 
     <div class="triangle-l"></div> 
     <div class="triangle-r"></div>   
    </div> 
</div> 

CSS : 당신은 삼각형, .triangle-l 및 .triangle-r가 명확하게 z-index:5 낮은있는 것을 볼 수 있습니다

#page_container { 
    background: red; 
    width: 400px; 
    position: relative; 
    z-index: 10; 
} 

#banner_wrapper { 
    position: relative; 
} 

#banner_image { 
    position: relative; 
} 

.triangle-l { 
    border-color: transparent green transparent transparent; 
    border-style: solid; 
    border-width: 15px; 
    height: 0px; 
    width: 0px; 
    position: absolute; 
    right: 0px; 
    top: 0px; 
    z-index: 5; 
} 

.triangle-r { 
    border-color: transparent transparent transparent blue; 
    border-style: solid; 
    border-width: 15px; 
    height: 0px; 
    width: 0px; 
    position: absolute; 
    right: 0px; 
    top: 0px; 
    z-index: 5; 
} 

일 #page_containerz-index:10이지만 여전히 그들은 #page_container 위에 나타납니다.

.triangle-l 및 .triangle-r을 z-index:-1으로 설정하여 원하는 결과를 얻을 수 있었지만 FF, Opera 및 Webkit에서만 작동합니다. IE가 지원되지 않습니다.

나는 그것이 스태킹 컨텍스트와 관련이 있다고 믿습니다. 그러나 브라우저 간 호환성으로 원하는 결과를 얻는 방법을 확신 할 수 없습니다.

Answer 1

당신은 절대적으로 옳습니다 - 그것은 스태킹 컨텍스트에 관한 것입니다.

요소에 z- 색인을 추가 할 때마다 새 컨텍스트를 만들 때마다 삼각형이 #page_container의 자손이므로 #page_container의 스태킹 컨텍스트에 속할 것이고 어떤 z- 인덱스 번호 삼각형을 선택하면이 컨텍스트 내에서만 의미를 가지게되므로이 컨테이너 뒤에서 뒤로 이동할 수 없습니다. 여기에 자세히

읽기 : https://developer.mozilla.org/en/CSS/Understanding_z-index/The_stacking_context

가능한 솔루션이다;

• 이동 HTML 구조의 용기 밖으로 요소 (가 CSS를 원하는 위치 및 다음 그들을 위치)
• 용기로부터 Z- 색인을 제거하고, Z 인덱스 삼각형 세트 -1 그것들을 문서 자체 아래로 옮기려면