为什么粘性定位的绝对子元素总是隐藏在另一个粘性元素后面？

Question

为什么粘性定位的绝对子元素总是隐藏在另一个粘性元素后面？

5

我想要一个固定的首列以及一些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似乎没有起作用。

- Džuris

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Temani Afif · Accepted Answer

您需要仅增加第一个粘性元素的z-index。两者具有相同的z-index，因此我们将考虑树顺序来绘制它们，并且两者都创建堆叠上下文，因此调整position:absolute元素的z-index将没有效果：

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/CSS2/zindex.html

（注：该链接为英文页面）