如何将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图表上？

回答

相关问题