Absolute div got covered by translated element

Question

I have a problem that I'm trying to solve but have been stuck so far.

I have a table that I use a little trick on it; this results in my table contains the style of

"transform: translate(0,0)"

for a bunch of cells. This is where the problem occurs. I'm having a tooltip in it, which requires position absolute to work. But so far, the tooltip got completely hidden by the translated element. You can see the problem through this:

th, td {
  padding: 20px
}

#cell {
  background-color: lightblue;
}

.parent {
  position: relative;
}

.translate {
  transform: translate(0,0);
}

.overflow {
  position: absolute;
  bottom: -20px;
  left: 0;
}

<html>
  <head></head>  
  <body>
    <table border="1">
    <thead>
       <tr>
         <th><p>Hi</p></th>
         <th class="parent translate">
           <p>Hello</p>
           <div class="overflow">Overflow text</div>
         </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>hello cell</td>
        <td class="translate" id="cell">hello cell</td>
      </tr>
    </tbody>
    </table>    
  </body>
</html>

How can I solve this problem? I have tried everything that I have thought of :(. Please help

Temani Afif · Accepted Answer · 2019-03-28T01:21:19.310

Simply increase the z-index of the parent element

th, td {
  padding: 20px
}

#cell {
  background-color: lightblue;
}

.parent {
  position: relative;
  z-index:2;
}

.translate {
  transform: translate(0,0);
}

.overflow {
  position: absolute;
  bottom: -20px;
  left: 0;
}

<html>
  <head></head>  
  <body>
    <table border="1">
    <thead>
       <tr>
         <th><p>Hi</p></th>
         <th class="parent translate">
           <p>Hello</p>
           <div class="overflow">Overflow text</div>
         </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>hello cell</td>
        <td class="translate" id="cell">hello cell</td>
      </tr>
    </tbody>
    </table>    
  </body>
</html>

You are facing the logical result of the painting order where the transformed element are painted after the positioned one since it comes later in the DOM tree and since there is no z-index specified.

Also note that adding z-index to the tooltip won't work because transform create a stacking context so z-index will place the tooltip inside that stacking context which is already placed below the #cell.

th, td {
  padding: 20px
}

#cell {
  background-color: lightblue;
}

.parent {
  position: relative;
}

.translate {
  transform: translate(0,0);
}

.overflow {
  position: absolute;
  bottom: -20px;
  left: 0;
  z-index:9999;
}

<html>
  <head></head>  
  <body>
    <table border="1">
    <thead>
       <tr>
         <th><p>Hi</p></th>
         <th class="parent translate">
           <p>Hello</p>
           <div class="overflow">Overflow text</div>
         </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>hello cell</td>
        <td class="translate" id="cell">hello cell</td>
      </tr>
    </tbody>
    </table>    
  </body>
</html>

Absolute div got covered by translated element

1 Answers1