具有位置的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-平均适用的位置:相对风格.

问题是:滚动时,表格隐藏在该顶部面板下(面板的不透明度为1).但让我感到惊讶的是,用位置定义的单元格:相对样式不会隐藏在面板下面.面板和单元格的内容重叠(它产生的效果就像顶部面板仅对该单元格具有不透明度).有人可以解释一下这种行为吗？

谢谢你,帕维尔

Answer 1

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

究其原因才会出现这种情况与hr-avg因为它是(可能)的唯一元素除了具有顶部面板position比其他static.然后因为它出现在HTML的顶部面板之后,默认情况下它将堆叠在它的顶部(因为它们都没有z-index).

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