title: z-index of hover tooltip with CSS
body: <p>I hover a thumbnail image using CSS-only:</p>
  
  <pre><code>&lt;style type='text/css'&gt;
  #like_table td a{z-index:2;}
  #like_table .tooltip
  {
      position: relative;
      z-index:1;
  }
  #like_table .tooltip a
  {
    z-index:2;
  }
  #like_table .tooltip span
  {
    z-index:9999;
    display:none;
  }
  #like_table .tooltip:hover span
  {
            position:absolute;
            display:block;
            top:1.5em;
            left:2em;
            border:1px solid black;
            background-color:white;
            padding:0.2em;
  }
  #like_table td .tooltip .tooltip_thumb{
              z-index:99999;
  }
  &lt;/style&gt;
  
  &lt;table id='like_table' class='smallfont' border='0' cellpadding='0' cellspacing='0'&gt;&lt;tr&gt;&lt;td&gt;
                      &lt;div class='like_row'&gt;
                          &lt;a href='#user1' class='nul'&gt;User 1&lt;/a&gt; liked &lt;a href='#link' class='tooltip'&gt;forum post&lt;span&gt;&lt;img src='image.jpg' class='tooltip_thumb' alt='' /&gt;&lt;/span&gt;&lt;/a&gt;
                          &lt;span class='by_user'&gt;by &lt;a href='#user2' class='nul'&gt;User 2&lt;/a&gt;&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>
  
  
  </p>
  
  <p>Unfortunately, the z-index on the span and the hover image does not seem to work.
  The image is shown "below" the username (with class by_user), but above the normal text.</p>
  
  <p>How can I make the overlay / tooltip show on top?</p>