如何将html文本放在画布flot图表的顶部？

Question

这是我的简单jsFiddle。我希望将HTML文本放在flot图表的顶部。或者将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);
});

Answer 1

您可以定位h1绝对值

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

为我工作

Answer 2

您应该将position: absolute;添加到您的CSS中的h1 ...

  

注意： z-index仅适用于定位元素（位置：绝对值，   position：relative，或position：fixed）。

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 ::::