절대적으로 테이블 셀의 맨 위에 div를 스택하는 방법

Question

두 번째 테이블 셀에는 내부에 div가 있는데이 셀을 <td> 외부로 절대적으로 배치하려고합니다. 현재이 문제가 있지만 문제는이 <td> 아래에있는 <td>'s이 div 상단에 표시된다는 것입니다. 결국 div의 각 부분을 <td> 안에 넣고 롤오버에 나타납니다. 다음은 문제의 그림입니다. 오렌지색 <td>은 마우스를 올려 놓았을 때입니다. 그러면 div가 최상위로 표시되도록 div를 어떻게 배치 할 수 있습니까? z-index을 제대로 사용하고 있는지 확실하지 않습니다. 사진에

링크 : Snapshot of Issue

가 여기에 관련된 CSS의 :

td.link { 
    position: relative; 
    z-index: 100; 
} 

td div { 
    height: 200px; 
    width: 200px; 
    position: absolute; 
    top: -20px; 
    right: -100px; 
    background: #CCC; 
    z-index: 500; 
} 

그리고 HTML :

<table> 
     caption>Emails For MPC Clients</caption> 
     <thead> 
     <th>Email</th> 
     <th>Link</th> 
     <th>Modified</th> 
    </thead> 
    <tr> 
      <td>Live Webinar</td> 
      <td class="link"> 
       <a href="#" target="_blank">liveWebinar.html</a> 
       <div> 
        <h2>Some Content goes in here</h2> 
       </div> 
      </td> 
      <td class="date">02/02/2012</td> 
     </tr> 
    </table> 

Answer 1

그게 문제가되지 않습니다 있도록 올바르게 Z-색인을 사용을 사용하지 않도록하는 것이 가장 좋습니다

위의 다른 div의를 배치 할 따라 Z- 인덱스를 사용합니다. 테이블을 상대적으로 배치하고 그 것이 야구장에 있는지보십시오.

table { 
position:relative; 
    z-index: 100 
} 

td.link { 
    position: relative; 
    z-index: 200; 
} 

td div { 
    height: 200px; 
    width: 200px; 
    position: absolute; 
    top: -20px; 
    right: -100px; 
    background: #CCC; 
    z-index: 500; 
} 

Answer 2

나는 테이블을 제거하고 표준 된 div를 사용하여 모든 것을 할 것입니다. 다음 테이블