Z- 인덱스가 예상대로 작동하지 않습니다. 데이터 스태킹 및 숨기기

아래 코드는 내가하려는 일을 보여줍니다. 내 "theOut"div 앞에 "blackOut"div가 나타나는 이유는 무엇입니까? z-index가 이것을 제대로 처리하지 않아야합니까? 사용하지 않고Z- 인덱스가 예상대로 작동하지 않습니다. 데이터 스태킹 및 숨기기

<html> 

    <head> 
     <style> 
      table.theGoods{ 
       display:block; 
       z-index:20; 
       background-color:yellow; 
       font-family:arial; 
       font-size:18px; 
       width:300px; 
       height:300px; 
       margin-right:auto; 
       margin-left:auto; 
       margin-top:180px; 
       text-align:center; 

      } 


      div.blackOut{ 
       position:absolute; 
       background-color:red; 
       width:100%; 
       height:100%; 
       padding:0px; 
       top:0px; 
       left:0px; 
       z-index:2; 

      } 

      div.behindIt{ 
       z-index:1; 
       background-color:red; 
      } 

      #myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em } 



     </style> 
    </head> 

     <body> 
      <table class="theGoods" id="theGoods"> 
       <tr> 
        <th> 
         la la 
        </th> 
       </tr> 
      </table> 

      <div class="blackOut" id="blackOut" onClick="myHider(event)"></div> 

     </body> 
    <script> 

     function myHider(e){ 
       document.getElementById("blackOut").style.display="none"; 
     } 

    </script> 

    </html>

출처

2012-01-24 jason m

당신 캔트 사용 Z- 색인 :

position:absolute;

나 :

position:relative;

table.theGoods

출처

2012-01-24 03:26:40

z-index:20;에서 부족하지 않고 아무런 영향을 미치지 않습니다 중 하나 position:absolute을 또는 position:relative. (후자를 원합니다.)

출처

2012-01-24 03:26:47 ruakh

z- 색인은 '정적'이 아닌 position 속성이있는 요소에만 영향을줍니다. table.theGoods에 position:relative;을 추가하면 괜찮을 것입니다. 일반적으로 스태킹에 관련된 모든 요소는 position : relative 또는 position : absolute를 가질 필요가 있습니다.

출처

2012-01-24 03:26:57 Beejamin

"위치 : 절대;"를 추가해야합니다. 테이블 스타일.

출처

2012-01-24 03:29:04 skybondsor

Z- 인덱스가 예상대로 작동하지 않습니다. 데이터 스태킹 및 숨기기

답변

관련 문제