Question

当放置多个图表时，上图表中的工具提示隐藏在其他图表后面。

我找到了一些关于如何做的提示，但没有任何帮助。无论如何都要将工具提示放在图表之上？

非常感谢！

Answer 1

这是纯粹的html：之后加载的任何div元素（意味着出现在html页面之后）将始终位于前面。

为了让第一个图表工具提示位于第二个工具提前：首先加载第二个图表并使用css中的绝对或相对位置在页面上设置其y位置：

我已经改变了他们的订单，将 container2 放在html的第一位：

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

然后将 container2 的位置设置在第一个位置之下（感谢top style属性）：

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

Answer 2

您可以使用tooltip pisitioner：

Answer 3

问题是由于每个高图容器都有自己的stacking context。这是因为highcharts-container具有位置：相对和 z-index：0 （由highcharts库动态应用的css）。

因此工具提示的z-index仅在其父高级图容器中有意义。

要解决此问题，我们需要使用以下内容覆盖highcharts-container的（z-index：0）规则：

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

这样所有的hightcharts-container＆amp;他们的孩子将分享相同的堆叠背景，他们的z指数将应用所需的效果。

您可以在此处查看此修复程序：http://jsfiddle.net/w5bLo1cw/4/