带有CSS的悬停工具提示的z索引

我仅使用CSS悬停缩略图图像：

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

不幸的是，跨度和悬停图像上的z索引似乎不起作用。 该图像显示在带有class by_user的用户名下方，但在正常文本上方

---

如何使覆盖图/工具提示显示在顶部？

删除所有当前的z索引，只打开z索引：9999。工具提示删除所有当前的z索引，只打开z索引：9999。工具提示由于所有这些项目不在同一级别，因此z索引将不起作用。它们都相互嵌套。Z-index仅适用于DOM中相同级别的元素，如下所示：

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

如果在跨距上设置z-index，这将起作用，但如果设置z-index，则不会产生任何效果，因为它是上部元素

---

编辑：您在css中编写了.tooltip a，但您没有in.tooltip，所以我想您需要修改a.tooltip。

您的z索引将无法工作，因为所有这些项都不在同一级别上。它们都相互嵌套。Z-index仅适用于DOM中相同级别的元素，如下所示：

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

如果在跨距上设置z-index，这将起作用，但如果设置z-index，则不会产生任何效果，因为它是上部元素

---

编辑：你已经在css中编写了.tooltip a，但是你没有in.tooltip，所以我想你需要修改.tooltip。

On.tooltip，它不起作用。但当我将它添加到.tooltip span时，它就起作用了。谢谢打开。工具提示，它不起作用。但当我将它添加到.tooltip span时，它就起作用了。谢谢那么，如果我想在顶部显示相同级别的内容，该怎么办？我想在一些其他web元素上显示工具提示，但不确定是否应该将工具提示移动到更高的级别，这会使css的继承成为一件痛苦的事情，或者是否应该使用其他方法将工具提示强制到顶部。无法强制元素位于页面上所有其他元素的顶部。要做到这一点，您应该非常精确地使用页面上所有的z索引。我建议您使用javascript插件，它是在每次鼠标悬停在某个项目上时动态构建的。他们在DOM的第一层创建它，并计算位置，放置非常大的z索引，以确保它与其他元素重叠。那么，如果我希望在同一层上的某个元素显示在顶部，我该怎么办？我想在一些其他web元素上显示工具提示，但不确定是否应该将工具提示移动到更高的级别，这会使css的继承成为一件痛苦的事情，或者是否应该使用其他方法将工具提示强制到顶部。无法强制元素位于页面上所有其他元素的顶部。要做到这一点，您应该非常精确地使用页面上所有的z索引。我建议您使用javascript插件，它是在每次鼠标悬停在某个项目上时动态构建的。他们在DOM的第一级创建它，并计算位置，放置非常大的z索引以确保它与其他元素重叠。