Question

我正在尝试在第一栏中添加一些粘性内容以及一些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在这种情况下似乎无能为力。

Answer 1

您只需要增加第一个粘性元素的z-index。两者都具有相同的z-index，因此我们将考虑以树顺序对其进行绘制，并都创建一个堆栈上下文，因此调整z-index元素的position:absolute将无效：

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;
}
tr:first-child  td:first-child{
  z-index:2;
}

[data-tooltip]:hover:after
{
  content: attr(data-tooltip);
  position: absolute;
  background: white;
  top: 22px;
}

<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>
    <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>
      </tr>
  </table>
</div>

有关绘画顺序的更多详细信息：https://www.w3.org/TR/css-position-3/#painting-order

为什么绝对的粘性子项始终隐藏在另一个粘性项的后面？

1 个答案: