divをテーブルセルの上に絶対に積み重ねる方法

Question

2番目のテーブルのセルには、<td>のすぐ外側に絶対に配置したいdivのセルがあります。現在私はこれを持っていますが、問題は、この<td>の下にある<td>'sがdivの上に表示されていることです。結局、私はそれぞれの<td>の内部divを持っているつもりです、そして、彼らはロールオーバーで現われます。ここに問題の写真があります。オレンジの<td>は私がマウスを持っているときです。では、divを最も上に表示するようにdivをどのように配置できますか？ z-indexを正しく使用しているかどうかは不明です。絵に

リンク：

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を使用してすべてのものを持っているでしょうSnapshot of Issue

ここで関連するCSSです。その後、テーブル