带有 CSS 的悬停工具提示的 z-index
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14386759/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
z-index of hover tooltip with CSS
提问by reggie
I hover a thumbnail image using CSS-only:
我仅使用 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>
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.
不幸的是，跨度上的 z-index 和悬停图像似乎不起作用。图像显示在用户名的“下方”（by_user 类），但在普通文本上方。
How can I make the overlay / tooltip show on top?
如何使叠加层/工具提示显示在顶部？
回答by Панайот Толев
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:
您的 z-index 将不起作用，因为所有这些项目不在同一级别。它们都相互嵌套。Z-index 仅适用于 DOM 中相同级别的元素，如下所示：
<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.
如果您在跨度上设置 z-index ，这将起作用，但是如果您穿上它，它将无效，因为它是“上”元素。
edit: and in your css you have written .tooltip abut you have no <a>in .tooltip, so you ment a.tooltipi suppose.
编辑：并且在您编写的 css中，.tooltip a但您没有<a>in .tooltip，所以a.tooltip我想您会提到。
回答by Mooseman
Remove all your current z-indexand just leave the z-index: 9999on .tooltip
删除所有电流z-index并保持z-index: 9999开启.tooltip
