Highcharts工具提示隱藏在其他圖表的後面

Question

當放置多個圖表時，來自上方圖表的工具提示會隱藏在其他人的背後。

我發現了一些關於如何使用它的提示，但沒有任何幫助。 是否有任何工具提示保持在圖表之上？

的例子是在這裏：http://jsfiddle.net/Zw3uM/

非常感謝！

Answer 1

您可以使用工具提示pisitioner：

http://api.highcharts.com/highcharts#tooltip.positioner

Answer 2

這是純HTML：（意爲HTML頁面後出現的）總是在前面之後加載的任何div元素。

爲了得到第一個圖表工具提示是在第二前方：加載第二在第一和使用在CSS的絕對或相對位置設置在網頁上的y位置：

我已經改變它們的順序，將container2的在第一，以html：

<div id="container2" style="height: 200px"></div> 
<div id="container1" style="height: 200px"></div> 

然後設置container2的的位置是在第一個（感謝頂端樣式屬性）：

div[id="container2"] { 
    position:absolute; 
    top:200px; 
} 

下面是結果：http://jsfiddle.net/Zw3uM/3/

Answer 3

的問題是由於具有其自身的每個stacking context容器highchart。這是因爲highcharts-container同時具有位置：相對和z-index：0（css由highcharts庫動態應用）。

因此，工具提示的z索引僅在其父級高圖容器中具有含義。

爲了解決這個問題，我們需要覆蓋（Z-指數：0）使用下面的規則來進行highcharts容器：

.highcharts-container 
{ 
    z-index: auto !important; 
    ... 
} 

這樣，所有hightcharts的容器&他們的孩子將共享相同的堆疊上下文和他們的z-索引將應用期望的效果。

您可以檢查這裏的修復：http://jsfiddle.net/w5bLo1cw/4/