IE8에서 HTML 및 CSS Z- 색인 문제

internet explore 8과 관련된 z-index 문제와 관련하여 질문이 있습니다. 메인 컨테이너가 있는데 그 안에는 divs이 여러 개 있습니다. 내 문제는 내가 javascript을 사용하여 메인 컨테이너 내에서 divs 내 아이 위에 새 divs을 새로 만듭니다. 몇 가지 이유를 들어 주 div 국경이 그것을 IE8의 모습입니다 새로 div 생성의 상단도 z-index 1. 더 명확하게하는 것입니다 주요 컨테이너 사업부 생각입니다 :IE8에서 HTML 및 CSS Z- 색인 문제

  ---- 
     | | <--newly created div generated by js 
----------------- 
|  | | | 
|  ---- | 
|    | 
|    | 
-----------------

원하는 출력 ..

  ---- 
     | | <--newly created div generated by js 
--------| |--- 
|  | | | 
|  ---- | 
|    | 
|    | 
-----------------

내 HTML

<div id='container'> 

    <div> 
    <a href='#'/> //hover to a will generate a new div. //before hover 

    <a href='#'> // <- after hover to the link 
     <div id='newDiv'> 
     contents.... 
     </div> 
    </a> 
    </div> 

</div>

CSS

#container{ 
    background-color: #FFFFFF; 
    border: 1px solid #364B78; 
    position: relative; 
    padding: 10px; 
    clear: both; 
    min-height: 200px; 
    z-index: 1; 
} 

#newDiv{ 
    position: absolute; 
    background-color: red; 
    top: -175px; 
    left: 50px; 
    width: 200px; 
    height: 150px; 
    z-index: 1000; 
    padding: 8px; 
}

이 문제는 IE8 및 IE7에서만 발생합니다. 이 문제를 해결할 여지가 있습니까? 고마워요!

편집는 :

난 그냥 문제가 div

<div id='container'> 

    <div> 
    <a href='#'/> //hover to a will generate a new div. //before hover 

    <a href='#'> // <- after hover to the link 
     <div id='newDiv'> 
     contents.... 
     </div> 
    </a> 
    <div id='border'></div> //this is the problematic div 
    </div> 

</div> 


css 

#border { 
    position:absolute; 
    top:0px; 
    left:0px; 
    height:4px; 
    width:100%; 
    background-image:url(/images/top.gif); 
//the top.gif is a 2px height and 100% width image which on top of the new div 
    z-index: 1; 
}

출처

2013-05-06 Rouge

코드가 작동해야하는 것처럼 보입니다. 확대/축소를 시도해 보셨습니까? 1; #container 및 #newDiv CSS (이전 버전의 IE에는 다시 그리기에 대한 이상한 문제가 있으며 줌 : 1을 추가하면 문제를 해결할 수 있음)가 있습니다. 이것은 또한 관련 이슈 일 수 있습니다 : http://stackoverflow.com/questions/1287439/ie7-z-index-layering-issues – Sean

이것은 로컬 스태킹 컨텍스트 (이전 버전의 IE에서 발생하는 경향이있는) . 그렇다면'relative' 또는'absolute'의'position' 값 또는'auto' 이외의'z-index' 값을 가진 모든 관련 요소에 대해 CSS와 HTML을 보여줄 필요가 있습니다. 가장 간단한 방법은 [jsfiddle] (http://jsfiddle.net)과 같은 온라인 서비스를 사용하여 데모를 작성하고 데모에 대한 링크를 추가하는 것입니다. 또는 라이브 페이지에 링크를 추가하십시오. –

I8/9 문제에도 불구하고 .container에 왜 스택 수준 값 (z- 인덱스)을 적용합니까? 상대 위치에 있으면 새로운 스택 컨텍스트가 생성됩니다. 그런데 div 값을받는 이라는 표시 값을 적용하면 더 깨끗하게 보입니다. 은 인라인 수준 요소이므로 표시 값을 수정하지 않으면 블록 수준의 요소를 내부에 포함하면 안됩니다. – Fico