javascript highcharts 工具提示 z-index
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20556824/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
highcharts tooltip z-index
提问by John
I'm trying to get the highcharts tooltip to have a zIndex using useHTMLto position it over another HTML element.
我试图让 highcharts 工具提示有一个 zIndexuseHTML用来将它定位在另一个 HTML 元素上。
See this fiddle: http://jsfiddle.net/sDu8V/
看到这个小提琴：http: //jsfiddle.net/sDu8V/
I'd like the tooltip to go over the pink box - instead of under it.
我希望工具提示越过粉红色框 - 而不是在它下面。
What am I missing?
我错过了什么？
回答by Pawe? Fus
Possible solution: http://jsfiddle.net/sDu8V/1/
可能的解决方案：http: //jsfiddle.net/sDu8V/1/
Required CSS:
所需的 CSS：
.highcharts-container {
position: inherit !important;
}
.highcharts-tooltip {
z-index: 9998;
}
Thanks to @Piotr, updated design for 4.1.x.
感谢@Piotr，更新了4.1.x 的设计。
回答by André Pena
You can't have onlythe tooltip to get rendered over the pink box because the whole chart is rendered in a single SVG object that is either totalllyover or beneath your pink both.
您不能只在粉红色框上渲染工具提示，因为整个图表都在一个 SVG 对象中渲染，该对象要么完全位于粉红色框上方，要么位于粉红色框下方。
What you can do is to render the whole chart over the pink box by making it background transparent.
您可以做的是通过使其背景透明来将整个图表呈现在粉红色框上。
Your chart:
您的图表：
chart: { backgroundColor:'transparent' }
Your div should also be beneath the chart:
您的 div 也应该在图表下方：
<div id="box" style="z-index:0"></div>
Live example: http://jsfiddle.net/7TcJ6/
现场示例：http: //jsfiddle.net/7TcJ6/
