绝对 div 被翻译的元素覆盖

Question

我有一个问题想解决，但一直卡在原地。

我有一个table，我用了一些小技巧；这导致我的 table 包含

的样式

"transform: translate(0,0)"

一堆细胞。这就是问题发生的地方。我有一个工具提示，它需要绝对位置才能工作。但到目前为止，工具提示被翻译后的元素完全隐藏了。你可以通过这个看到问题：

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>

我该如何解决这个问题？我已经尝试了所有我想到的:(。请帮助

Answer 1

只需增加父元素的z-index

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>

您面临的是 painting order 的逻辑结果，其中转换后的元素在定位的元素之后绘制，因为它在 DOM 树中稍后出现并且因为没有 z-index指定。

另请注意，将 z-index 添加到工具提示将不起作用，因为转换会创建一个堆叠上下文，因此 z-index 会将工具提示放置在已经放置在 [=18 下面的堆叠上下文中=].

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>

绝对 div 被翻译的元素覆盖

Absolute div got covered by translated element

html

css

css-transforms