2012-07-16 32 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