我想要一个固定的首列以及一些CSS工具提示。这是我的设置的简化模型:
div.container
{
width: 300px;
overflow: auto;
}
table
{
border-collapse: collapse;
}
td
{
border: 1px black solid;
}
td div
{
width: 80px;
height: 30px;
}
td:first-child
{
position: sticky;
left: 0;
background-color: lime;
}
[data-tooltip]:hover:after
{
content: attr(data-tooltip);
position: absolute;
background: white;
top: 22px;
}
<!doctype html>
<div class="container">
<table>
<tr>
<td><div data-tooltip="123">hover me</div>
<td><div></div>
<td><div></div>
<td><div></div>
<td><div></div>
<td><div></div>
<td><div></div>
<td><div></div>
<tr>
<td><div></div>
<td><div></div>
<td><div></div>
<td><div></div>
<td><div></div>
<td><div></div>
<td><div></div>
<td><div></div>
</table>
</div>
position: sticky
),但在我的情况下这不是可接受的解决方案。我该怎么做才能将工具提示置于前面?在这种情况下,
z-index
似乎没有起作用。
position:relative
不像sticky
一样创建堆叠上下文(就像我在我的答案中所说的),使用position:relative
+z-index:0
,您将获得相同的行为...当您有一个堆叠上下文时,元素应该放置在此上下文中。 - Temani Afif