1

Here's my simple jsFiddle. I'm looking to place HTML text on top of the flot chart. Or put flot chart in the background (depending on how you think about it).

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 (see jsFiddle for the rest) :

$(document).ready(function(){
    chart = $.plot($("#placeholder"),data,options);
});
1
  • 1
    For some reason setting the #placeholder with a z-index of -1 works for me :P Aug 29, 2014 at 18:07

2 Answers 2

2

You should add position: absolute; to the h1 in your css...

Note: z-index only works on positioned elements (position:absolute, position:relative, or 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 ::::

1
  • 1
    Or position: relative to take advantage of the z-index without positioning.
    – Evan
    Aug 29, 2014 at 18:55
2

You could make the positioning of the h1 absolute

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

Worked for me

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.