Z-Index가 IE7에서 작동하지 않습니다.

Question

삭제 버튼을 클릭 할 때 대화 상자를 만들었습니다. 부모 Div를 오버레이합니다.

IE 7을 제외한 모든 브라우저에서 작동합니다. 대화 상자와 div에 CSS를 언급했습니다.

dialog_box { 
width:219px; 
height:100px; 
background-image:url(../images/preference/popup.png); background-repeat:no-repeat; 
padding:10px; 
position:absolute; 
right:-10px; 
z-index:50; 
overflow:hidden; 
} 

Div{ 
border:solid 1px #ffffff; 
padding:10px; 
padding-left:30px; 
padding-top:10px; 
padding-bottom:10px; 
position:relative; 
text-align:left; 
} 

그 이유는 무엇입니까?

Answer 1

div와 동일한 컨테이너에있는 dialog_box에서 참조하는 요소가 있습니까? IE에서 동일한 포함 블록에 포함 된 요소에 대한 z- 인덱스를 처리하는 것은 때로는 기발합니다. dialog_box를 상위 레벨을 포함하는 블록 (body 요소)으로 옮겨보고 어떻게 작동하는지보십시오. 당신은 당신의 포지션을 조정할 필요가 있을지 모르지만 보통 팝업 레벨을 몸체 레벨에 놓으면 어떤 기발한 z- 인덱스/절대 포지셔닝 동작이 완화됩니다.

Answer 2

이것은 IE7의 일반적인 문제입니다. http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/64774ff1-1cce-4666-a2c7-9a899994aaef

또는 "IE7 Z- 색인을"구글 등 자세한 내용을 보려면 :

이를 참조하십시오.

Answer 3

여기에 어떤 일이 일어나고 있는지 잘 모르겠습니다 ... DIV를 dialog_box 아래에 맞춰 보셨습니까?

DIV에 대한 Z- 색인을 정의하지 않았을 수 있습니다. 40 개가 주어 지는지 확인하십시오.

Answer 4

HTML을 보지 않고서는 어렵습니다. iframe이 어떻게 영향을 미치는지 모르겠지만, this question과 같은 문제인 것처럼 보입니다. Davidyn이 맞을 것 같습니다.

나는 해결책을 찾기 위해 몇 가지 그림을 사용하여 IEs z-indexing (업데이트 : 업데이트 : 신규 및 실시간 링크)에 게시물을 올렸습니다.

기사가 다운 그래서 지금 여기있는 wayback machine's archive

Answer 5

당신은 위치에 Z- 인덱스 설정해야합니다 수 있습니다 : (어떤이있는 경우가 아니라 그 안에 절대 요소) 상대 요소를.

위치 지정된 요소에 대해 z- 인덱스를 설정할 때 하위 요소에 대해 새로운 z- 순서 스택이 만들어집니다.

Answer 6

가장 좋은 방법은 도움이 될 것입니다. 사용 JQuery와

$(function() { 
    var zIndexNumber = 1000; 
    $(".x").each(function() { 
      $(this).css('zIndex', zIndexNumber); 
      zIndexNumber -= 10; 
    }); 
}); 

스타일

.rel {폭 : 50 픽셀; 높이 : 50px; 배경색 : # 333; 위치 : 상대적; } .abs {위치 : 절대; 상단 : 34px; 왼쪽 : 5px; background-color : #FFF; 높이 : 20px; 너비 : 30px; }

HTML을

<div class="rel"><div class="abs"></div></div>