具有位置的td中的元素：相对重叠在另一个位置上：固定元素

Question

我有一个难以解决的问题：在我的网页上有一个固定的顶部面板 div （类似于gmail的顶部面板）。下面，我有一个包含多个单元格的表格，最后一个单元格定义如下：

<td class="col-time">
    <div title="średnie: 180, maksymalne: 186, minimalne: 142" class="hr-avg">
        <span>180 (89%) </span>/ <span class="hr-max">186 (92%) </span>
    </div>
</td>

hr-avg 应用位置：相对样式。

问题是：滚动时，表隐藏在该顶部面板下（面板的不透明度为1）。但让我感到惊讶的是，使用 position：relative 样式定义的单元格不会隐藏在面板下。面板＆amp;单元格的内容重叠（它给出的效果就像顶部面板仅对该单元格具有不透明度）。有人可以解释一下这种行为吗？

谢谢，帕维尔

Answer 1

这应该通过给你的顶部面板div z-index高于必须低于它的任何东西来修复。

仅hr-avg出现此问题的原因是因为它（可能）是除了position以外的static以外的唯一元素。然后，因为它出现在HTML顶部面板之后，默认情况下会叠加在它上面（因为它们都没有z-index）。

将顶部面板的z-index设置为99999这样的高数字可以解决您的问题（高数字是这样您仍然可以在内容中堆叠内容而不会超出顶部面板）。