如何將HTML文本放置在畫布上的flot圖表上？

這是我的簡單jsFiddle。我正在尋找將HTML文本放在浮標圖上。或者把flot圖表放在後臺（取決於你如何看待它）。如何將HTML文本放置在畫布上的flot圖表上？

text on top of flot

HTML：

<div id="wrapper"> 
    <h1>Place me on top please. How?!</h1> 
    <div id="placeholder"></div> 
</div>

CSS：

#wrapper { position:relative; } 
h1 { z-index:100; color:blue; font-size:5em; margin:0; line-height:0.9em; } 
#placeholder { 
    width:500px; 
    height:300px; 
    position:absolute; 
    top:0; 
    left:0; 
    z-index:1; 
}

JS（見jsFiddle爲休息）：

$(document).ready(function(){ 
    chart = $.plot($("#placeholder"),data,options); 
});

來源

2014-08-29 Ryan

出於某種原因，與設置的z-index -1的#placeholder工作對我來說：P – 2014-08-29 18:07:18

您應該添加position: absolute;在你的CSS的H1 ...

注：的z-index只適用於定位元素（位置：絕對，位置：相對或位置：固定）。

source of this quoted text

#wrapper { position:relative; } 
h1 { z-index:100; color:blue; position: absolute; font-size:5em; margin:0; line-height:0.9em; } 
#placeholder { 
    width:500px; 
    height:300px; 
    position:absolute; 
    top:0; 
    left:0; 
    z-index:1; 
}

:::: JSFIDDLE ::::

來源

2014-08-29 18:10:51 mk117

或'位置：relative'採取的優勢'z-index'沒有定位。 – Evan 2014-08-29 18:55:34

你可以米AKE的H1的絕對定位

h1 { z-index:100; color:blue; font-size:5em; margin:0; line-height:0.9em; position:absolute;}

爲我工作

來源

2014-08-29 18:08:13 QuinnFTW

如何將HTML文本放置在畫布上的flot圖表上？

回答

相關問題