html - td 中位置为 :relative overlaps on another position:fixed element 的元素

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 应用position:relative 风格。

问题是:滚动时，表格隐藏在顶部面板下方(面板的不透明度为 1)。但令我惊讶的是，用position:relative 样式定义的单元格并没有隐藏在面板下。面板和单元格的内容重叠(它产生的效果就像顶部面板仅对该单元格具有不透明度)。有人可以解释这种行为吗？

谢谢，帕维尔

Answer 1

这应该通过给你的顶部面板 div 一个 z-index 来解决，它高于它下面的任何东西。

只有 hr-avg 才会出现这种情况的原因是因为它(可能)是除了顶部面板之外唯一具有 position 而非 的元素静态。然后因为它出现在 HTML 的顶部面板之后，默认情况下它将堆叠在顶部面板之上(因为它们都没有 z-index)。

将顶部面板的 z-index 设置为较大的数字，例如 99999 应该可以解决您的问题(较高的数字是为了让您仍然可以在内容中堆叠内容不超过顶部面板)。