2012-07-16 36 views
0

好的,所以我试图覆盖工具提示上所有父级div /元素的z索引,并且使用我需要的表设置很困难使用。表中的Z索引和工具提示(DOM的顺序)

http://jsfiddle.net/Z9H4U/5/

在前面的JS小提琴,徘徊在底部行(#3),你会认为本身徘徊在提示覆盖了从列#2的“内容”一词。这是因为Z指数是从相应的父母继承(我认为),因此是平等的。因此,堆栈顺序由DOM本身内的出现顺序决定。出于这个原因,该工具提示涵盖了其上方的行中的任何内容,并且未能覆盖其下方的行中的任何内容。

我正在寻找解决方案,我知道这可能是不可能的,但我只是希望我错了!

回答

0

我很确定这个特定的Z指数问题不能绕开。我用@ r3bel广泛讨论的答案没有考虑到我的特殊用例,JS小提琴也不是一个正确的解决方案。

我最终使用了Twitter Bootstrap的bootstrap-popover.js插件,该插件将动态链接添加到<body>,以确保它在z-index堆栈中的位置得到遵守。

1

那么为什么你不离开td元素的z-index属性呢?

edited version of your jsfiddle

我认为这是你想要得到的,正确的呢? :)

btw:“位置:相对'对表格行组,表格页眉组,表格行,表格列组,表格列, table-cell和table-caption元素是未定义的“,所以你可能不想使用相对于td元素的位置,但在td元素中使用子div或类似的东西:)

I添加一个位置的div:相对于第一行,你可以看到差异(如果你使用例如最新的Firefox)

+0

好点@ r3bel。为此抱歉,但我很懒,未能完全破坏这个问题。我实际上在每个'​​'内都有多个div,其中一些div是'postion:relative',一些是'position:absolute',两者都有工具提示。更新JS小提琴:http://jsfiddle.net/Z9H4U/5/ ...不用说,这是一个很长的故事。这是一个包含多天事件块的日历。 – Brian 2012-07-17 00:20:35

+0

您必须在每个td元素中添加至少一个周围的“position:relative”div,因为所有“position:absolute”元素都将定位到table标签上,否则将父母的div位置更改为绝对值,完成我猜.. ^^):[http://jsfiddle.net/Z9H4U/6/](http://jsfiddle.net/Z9H4U/6/) – r3bel 2012-07-17 01:04:19

+0

是的,不幸的是你缩短了工具提示,所以问题消失了,但它从未解决。我只更改了更新的JS小提琴中的工具提示的高度,并得到这个:http://jsfiddle.net/Z9H4U/8/。 很确定我需要做什么是不可能的,这种奇怪的感觉,因为这几乎从来没有发生在CSS中。 – Brian 2012-07-17 01:26:40