Why is absolute child of a sticky is always hiding behind another sticky?

user_2182900 0
Viewed 1019

I am trying to have a sticky first column as well as some CSS tooltips. Here is a simplified model of my setup:

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>

The problem is that the tooltip hides behind the cell on the next row and I can't find any solution for that (other than removing position: sticky) which is not an acceptable solution in my case.

What should I do to bring the tooltip in front? z-index seems to do nothing in this case.

css
1 Answers

You need to increase the z-index of only the first sticky element. Both have the same z-index so we will consider the tree order to paint them and both create a stacking context so adjusting the z-index of the position:absolute element will have no effect:

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>

For more details about the painting order: https://www.w3.org/TR/CSS2/zindex.html

user_86203330
Related