好的,所以我正在尝试覆盖工具提示上所有父级 div / 元素的 z-index,并且证明我需要使用的表设置很困难。
在前面的 JS Fiddle 中,悬停在底行 (#3),您将看到工具提示在悬停时覆盖了第 2 行中的“内容”一词。这是因为 Z-index 是从各自的父母(我认为)继承的,因此是平等的。因此,堆栈顺序由 DOM 本身的出现顺序决定。出于这个原因,工具提示会覆盖其上方行中的任何内容,而无法涵盖其下方行中的任何内容。
我正在寻找解决方案,我知道这可能是不可能的,但我只是希望我错了!
好的,所以我正在尝试覆盖工具提示上所有父级 div / 元素的 z-index,并且证明我需要使用的表设置很困难。
在前面的 JS Fiddle 中,悬停在底行 (#3),您将看到工具提示在悬停时覆盖了第 2 行中的“内容”一词。这是因为 Z-index 是从各自的父母(我认为)继承的,因此是平等的。因此,堆栈顺序由 DOM 本身的出现顺序决定。出于这个原因,工具提示会覆盖其上方行中的任何内容,而无法涵盖其下方行中的任何内容。
我正在寻找解决方案,我知道这可能是不可能的,但我只是希望我错了!
那么你为什么不把 td 元素的 z-index 属性去掉呢?
我想这就是你想要得到的,对吧?:)
顺便说一句:“‘位置:相对’对表格行组、表格标题组、表格页脚组、表格行、表格列组、表格列、表格单元格和表格的影响-caption 元素未定义。”,因此您可能不想在 td 元素中使用相对位置,而是在 td 元素中使用子 div 或类似的东西:)
我在第一行添加了一个带有 position: relative 的 div,你可以看到差异(如果你使用例如最新的 firefox)
我很确定这个特定的 Z-index 问题是无法避免的。我与@r3bel 广泛讨论的答案并没有考虑到我的特定用例,而且 JS Fiddle 并不是一个完全正确的解决方案。
我最终使用了 Twitter Bootstrap 的bootstrap-popover.js插件,该插件将弹出框附加到<body>动态确保它在 z-index 堆栈中的位置得到尊重。