表格单元格中的省略号通过叠加的dom元素显示

Question

我在向表格中的单元格添加text-overflow: ellipsis时发现了一个奇怪的问题：

似乎ellipsis忽略了z-index，并在桌面顶部移动覆盖元素时显示通过覆盖的dom元素。

这是dom结构：

<div>
  Could be a taskbar
</div>
<table>
  <thead>
    <tr>
      <th>uno</th>
      <th>dos</th>
    </tr>
  </thead>
  <tbody>
  <tr>
    <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</td>
    <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</td>
  </tr>
  </tbody>
</table>

这是css：

div{
  background: rgb(200, 100, 100);
  position: fixed;
  height: 100px;
  width: 100%;
  top: -50px;
  left: 0;
}

div:hover{
  top: 0;
}

table{
  table-layout:fixed;
  margin-top: 50px;
  width: 100%;
}

table thead tr th{
  background: rgb(100, 200, 100);
  width: 100px;
}

table tbody tr td{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

这是默认视图:(“任务栏”top为-50px）

这是“问题”视图:(“任务栏”top为0）

实时测试：https://jsfiddle.net/gu1x1eka/

注意省略号的点。

• 在Firefox 45.0.2上测试[失败！]
• 在Chrome浏览器上测试49.0.2623.112米[作品！]

你有同样的问题吗？我的CSS中的错误导致了这个问题吗？

Answer 1

只需在任务栏z-index: 1;上设置div。

Updated Fiddle

参考此问题（根据OP的请求添加）：http://www.456bereastreet.com/archive/201305/firefox_and_the_magical_text-overflowellipsis_z-index/