z-index of hover tooltip with CSS

问题

I hover a thumbnail image using CSS-only:

<style type='text/css'>
#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;
}
</style>

<table id='like_table' class='smallfont' border='0' cellpadding='0' cellspacing='0'><tr><td>
                    <div class='like_row'>
                        <a href='#user1' class='nul'>User 1</a> liked <a href='#link' class='tooltip'>forum post<span><img src='image.jpg' class='tooltip_thumb' alt='' /></span></a>
                        <span class='by_user'>by <a href='#user2' class='nul'>User 2</a></span>
                    </div>
                    </td>
</tr>

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.

How can I make the overlay / tooltip show on top?

回答1:

Remove all your current z-index and just leave the z-index: 9999 on .tooltip

回答2:

Your z-index will not work because all these items are not on the same level. They are all nested in each other. Z-index only works on elements on same level in DOM like this:

<div class="level1">
   <span class="level2"> 1 </span>
   <span class="level2"> 2 </span>
   <span class="level2"> 3 </span>
</div>

that will work if you set z-index on the spans, but if you put on it will have no effect because it is "upper" element.

edit: and in your css you have written .tooltip a but you have no <a> in .tooltip, so you ment a.tooltip i suppose.

来源：https://stackoverflow.com/questions/14386759/z-index-of-hover-tooltip-with-css

标签

css

tooltip

z-index