Question

In the second table cell I have a div inside of it that I want to be absolutely positioned right outside of the <td>. Currently I have this, but the problem is that the <td>'s that sit below this <td> are appearing on top of the div. In the end, I am going to have div’s inside of each <td> and they will appear on rollover. Here is a picture of the issue, the orange <td> is when I have my mouse over it. So how can I position the div so that it appears topmost. Not sure if I am using z-index properly.

link to picture: Snapshot of Issue

Here’s the associated 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;
}

And the 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

You are using Z-Index Correctly so that is not the issue. Try positioning your table relatively and see if that gets you in the ballpark.

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;
}