我试图在其他字段和表上显示创建到表字段中的工具提示。 问题是，其他表和元素被创建到将CSS z-index属性设置为0的其他DIV中。
因此，即使我将工具提示CSS的z-index属性设置为一个高值（例如9999），它也总是显示在其他表后面（因为z-index堆叠上下文）。
我不想修改其他元素的z-index属性，因为我正在将我的元素注入到第三方创建的web页面中。
另外，我不想将工具提示移到更高的级别，因为当包含工具提示的元素将被第三方动态删除时，我希望工具提示也被自动删除。
有什么CSS解决方案吗？
我有这个JSFiddle来处理这种情况:https://JSFiddle.net/u6q8j4ck/
null
.content {
position: relative;
display: block;
margin-top: 10px;
margin-bottom: 10px;
z-index: 0;
}
table {
position: relative;
background: #ccc;
}
table td {
white-space: nowrap;
}
table td span {
position: relative;
display: inline-block;
}
.hoverable {
position: relative;
display: inline-block;
white-space: nowrap;
}
.hoverable img {
display: inline-block;
width: 15px;
}
.tooltip {
position: absolute;
display: none;
z-index: 9999;
padding: 5px;
background-color: white;
white-space: nowrap;
border-style: solid;
border-width: 1px;
}
.hoverable:hover .tooltip{
display: block;
}<html>
<body>
<div class="content">
<table border>
<tbody>
<tr>
<td>
<span>Hover this:</span>
<div class="hoverable">
<img src="https://img.icons8.com/flat_round/344/info.png">
<div class="tooltip">
<span>I am on TOP of the tables?</span>
<ul>
<li>List 1</li>
<li>List 2</li>
</ul>
</div>
</div>
</td>
<td>Table Text</td>
<td>Table Text</td>
</tr>
</tbody>
</table>
<div>
<span>Content text</span>
</div>
</div>
<div class="content">
<table border>
<tbody>
<tr>
<td>
<span>Hover this:</span>
<div class="hoverable">
<img src="https://img.icons8.com/flat_round/344/info.png">
<div class="tooltip">
<span>I am on TOP of the tables?</span>
<ul>
<li>List 1</li>
<li>List 2</li>
</ul>
</div>
</div>
</td>
<td>Table Text</td>
<td>Table Text</td>
</tr>
</tbody>
</table>
<div>
<span>Content text</span>
</div>
</div>
<div class="content">
<table border>
<tbody>
<tr>
<td>
<span>Hover this:</span>
<div class="hoverable">
<img src="https://img.icons8.com/flat_round/344/info.png">
<div class="tooltip">
<span>I am on TOP of the tables?</span>
<ul>
<li>List 1</li>
<li>List 2</li>
</ul>
</div>
</div>
</td>
<td>Table Text</td>
<td>Table Text</td>
</tr>
</tbody>
</table>
<div>
<span>Content text</span>
</div>
</div>
</body>
</html>null
也许我漏掉了什么，但是使用Temani Afif链接的答案中解释的一个技巧似乎可以解决这个问题:
null
.content {
position: relative;
display: block;
margin-top: 10px;
margin-bottom: 10px;
z-index: 0;
}
table {
position: relative;
background: #ccc;
}
table td {
white-space: nowrap;
}
table td span {
position: relative;
display: inline-block;
}
.hoverable {
position: relative;
display: inline-block;
white-space: nowrap;
transform-style: preserve-3d;
}
.hoverable img {
display: inline-block;
width: 15px;
}
.tooltip {
position: absolute;
display: none;
z-index: 9999;
padding: 5px;
background-color: white;
white-space: nowrap;
border-style: solid;
border-width: 1px;
transform: translateZ(1px);
}
.hoverable:hover .tooltip{
display: block;
}<html>
<body>
<div class="content">
<table border>
<tbody>
<tr>
<td>
<span>Hover this:</span>
<div class="hoverable">
<img src="https://img.icons8.com/flat_round/344/info.png">
<div class="tooltip">
<span>I am on TOP of the tables?</span>
<ul>
<li>List 1</li>
<li>List 2</li>
</ul>
</div>
</div>
</td>
<td>Table Text</td>
<td>Table Text</td>
</tr>
</tbody>
</table>
<div>
<span>Content text</span>
</div>
</div>
<div class="content">
<table border>
<tbody>
<tr>
<td>
<span>Hover this:</span>
<div class="hoverable">
<img src="https://img.icons8.com/flat_round/344/info.png">
<div class="tooltip">
<span>I am on TOP of the tables?</span>
<ul>
<li>List 1</li>
<li>List 2</li>
</ul>
</div>
</div>
</td>
<td>Table Text</td>
<td>Table Text</td>
</tr>
</tbody>
</table>
<div>
<span>Content text</span>
</div>
</div>
<div class="content">
<table border>
<tbody>
<tr>
<td>
<span>Hover this:</span>
<div class="hoverable">
<img src="https://img.icons8.com/flat_round/344/info.png">
<div class="tooltip">
<span>I am on TOP of the tables?</span>
<ul>
<li>List 1</li>
<li>List 2</li>
</ul>
</div>
</div>
</td>
<td>Table Text</td>
<td>Table Text</td>
</tr>
</tbody>
</table>
<div>
<span>Content text</span>
</div>
</div>
</body>
</html>