IE는 위치가 지정된 요소에서 Z- 색인을 무시합니다.

Question

IE는 아직 내 존재의 상처가되고 있습니다. 제가 작업하고있는 사이트의 상단에는 수평 메뉴가 있습니다.이 메뉴는 상위 메뉴 DIV (절대 위치)에 절대 위치에있는 순수 CSS 메뉴를 트리거합니다. 이렇게하면 IE와 W3C 호환 브라우저 모두에서 메뉴가 완벽하게 배치됩니다.

더 많은 위치에있는 요소가 페이지 아래쪽에있을 때 문제가 발생합니다. 이것들은 절대적인 위치에 있어야하는 데이터가 있기 때문에 상대적인 위치에 있습니다. 다시 한번 테스트 한 모든 브라우저에서 올바르게 표시됩니다.

문제는 최상위 메뉴가 열리고 페이지 아래로 위치가 지정된 요소에 의해 부분이 가려져서 사실상 모두에 대해 정의 된 z- 인덱스 속성이 있더라도이 요소 아래에 위치한다는 것입니다. (CSS 파일과 인라인 모두).

IE가 제대로 표시되도록하는 유일한 방법은 메뉴의 실제 HTML을 페이지의 아래쪽에 (DOM 용어로) 페이지의 다른 위치에 배치하는 것입니다. 나는 이것을 절대 최후의 수단으로 만 할 것이다.

모든 요소는 동일한 유형 (div)입니다.

<div id='menu'> 
<div id='cat_menu' style='display:none;z-index:10000;'> 
<table cellspacing='0' cellpadding='0' class='brmenu' width='100%'> 
    [data] 
</table> 
</div> 

<div class='product_new' style='z-index:20;'>[data]</div> 
<div class='product_listing' style='background-color:#FFFFFF;'>[data]</div> 

그리고 관련 CSS : 다음은 관련 HTML은

div#menu { 
height: 26px; 
padding: 0; 
position: relative; 
} 

div#cat_menu { 
position: absolute; 
top: 25px; 
left: 115px; 
width: 300px; 
z-index: 1000; 
} 

div.product_new { 
background-image: url("/images/sp_images.png"); 
background-position: 0 -108px; 
background-repeat: no-repeat; 
padding 0px; 
height: 40px; 
font-size: 9pt; 
margin-top: 5px; 
position: relative; 
z-index: 20; 
} 

Answer 1

시도 : http://css-tricks.com/snippets/jquery/fixing-ie-z-index/

Answer 2

jQuery를 같이 프로토 타입으로 작동하는 것 같다 위의 솔루션 음 ... Prototype 코드를 아래에 포함 시켰습니다 :

var zIndexNumber = 1000; 
$$("div").each(function(e) { 
    e.setStyle({ zIndex: zIndexNumber }); 
    zIndexNumber -= 10; 
}); 

Answer 3

노트의 부부 :

• suckerfish dropdowns 잘 작동하도록 입증된다. 왜 바퀴를 재발견합니까?
• IE는 형제 요소에 대해 z- 인덱스를 안정적으로 렌더링합니다. 이 때문에 BODY 태그의 직접 하위 요소 인 "z-index"요소 만 사용하는 것이 가장 좋습니다.
• 마크 업을 변경하지 않으려면 #menu 요소의 "20"위에 z- 인덱스를 설정해야합니다. 문제는 z- 인덱스를 설정하면 요소가 흐름에서 벗어나는 (바람직하지 않음) 것입니다.
• style = "..."속성을 사용하면 CSS가 매우 구체적입니다 (스타일 시트에서 "! important"를 사용해야합니다.)
• "position : relative"triggers " hasLayout "for IE

Answer 4

나는 동일한 문제가있었습니다. 조금만 돌아 본 후에 David와 동의합니다. "IE는 형제 요소에 대한 Z- 인덱스를 안정적으로 렌더링합니다."

나는 쉬운 대안을 찾았다. 즉, 형제가 아닌 요소의 z- 인덱스를 0으로 렌더링하는 것 같습니다 (마치 Z- 인덱스가없는 것처럼). 문제가되는 요소와 그 부모 요소를 음수 z- 인덱스로 설정하여 문제를 해결했습니다. 즉, z- 인덱스가 0으로 재설정 된 요소 아래에 해당 요소를 배치했습니다.