Question

我有一个要解决的问题，但到目前为止已经被卡住了。

我有一张桌子，上面有个小窍门；结果在我的表格中包含

的样式

"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添加到工具提示中将不起作用，因为transform会创建一个堆叠上下文，因此z-index会将工具提示放置在该堆叠上下文中，该堆叠上下文已放置在#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>

有关更多详细信息的问题：

'transform3d' not working with position: fixed children

Why elements with any z-index value can never cover its child?

I have position but z index is not working

绝对div被翻译元素覆盖

1 个答案: