将半透明的div放在highcharts图上

Question

是否可以将div放在生成的highcharts图上？ 例如，具有透明背景的div出于纯美学目的将在其中包含文本。

能够选择图表并不重要-只是看到它即可。

Answer 1

可以仅在CSS中完成您想做的事情。

正如评论中提到的，您想要一个relative容器，然后将元素absolute定位在其中。

HTML

<div class="container">
    <canvas id="myCanvas"></canvas>
    <div class="overlayed"></div>
</div>

CSS

.container {
    width: 150px;
    height: 150px;
    position: relative;
}
div.overlayed, canvas {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

我只是使用了一个示例canvas元素来了解图表的位置。

这是一个JSFiddle

Answer 2

绝对添加具有比Highcharts图表更高的z-index位置的div。 请参阅： http ： //jsfiddle.net/Ww5Tg/9/

<div class="over"></div>
<div id="container" style="height: 300px; width: 400px"></div>

和CSS：

.over {
    width: 400px;
    height: 300px;
    position: absolute;
    z-index: 100;
    border: 1px solid black;
    background-color: black;
    opacity: 0.2;    
}