带有 CSS 的悬停工具提示的 z-index答案

【问题标题】：z-index of hover tooltip with CSS带有 CSS 的悬停工具提示的 z-index
【发布时间】：2013-01-17 19:38:25
【问题描述】：

我只使用 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-index 似乎不起作用。图像显示在用户名“下方”（类 by_user），但在普通文本上方。

如何使叠加层/工具提示显示在顶部？

【问题讨论】：

标签： css tooltip z-index

【解决方案1】：

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

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

如果您在 span 上设置 z-index，这将起作用，但如果您设置它，它将无效，因为它是“上部”元素。

编辑：在你的css中你写了.tooltip a，但你在.tooltip中没有<a>，所以我想你是a.tooltip。

【讨论】：

那么如果我想在同一级别上显示一些东西我该怎么办？我想在其他一些 Web 元素上显示工具提示，但不确定是否应该将工具提示移动到更高级别（使 css 的继承变得痛苦）或者是否应该使用另一种方法将工具提示强制到顶部
没有办法强制元素位于页面上所有其他元素的顶部。为此，您应该非常精确地使用整个页面的所有 z-index。我会推荐使用一个 javascript 插件，每次你将鼠标悬停在一个项目上时它都会动态构建。他们使用计算的位置在 DOM 的第一级创建它，并放置非常大的 z-index 以确保它与所有其他元素重叠。

【解决方案2】：

删除所有当前的z-index，然后将z-index: 9999 留在.tooltip 上

【讨论】：

在 .tooltip 上，它不起作用。但是当我将它添加到“.tooltip span”时它会起作用。谢谢！