Как складывать div абсолютно поверх ячеек таблицы

Question

Во второй ячейке таблицы у меня есть div внутри, чтобы я был абсолютно расположен прямо за пределами <td>. В настоящее время у меня есть это, но проблема в том, что <td>'s, которые сидят ниже этого <td>, появляются сверху div. В конце концов, у меня будет div внутри каждого <td>, и они появятся при опрокидывании. Вот фотография вопроса, оранжевый <td> - это когда я надел на нее курсор. Итак, как я могу поместить 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-Index правильно, так что это не проблема. Постарайтесь позиционировать свой стол относительно и посмотрите, попадет ли вам на стадион.

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

Я хотел бы удалить таблицы и есть все, используя стандартные дивы. затем использовать Z-индекс соответственно поместить другие дивы выше

Это лучше избегать использования таблиц