In html 5, how to positioning a div element on top of a canvas element?

Question

Hi. Can anyone help me: I'm trying to put a div (say, 10px by 10px) element on top (in front) of a canvas element (say 500px by 500px) in html. I have tried changing the z-index of each, to no avail. Does anybody have any ideas, or is it one of those things that you can't really do? I already know how to do absolute positioning and everything, the div element just hangs out in the background behind the canvas element. I need a way to bring it to the front and the canvas element to the back.

Thanks!

Answer 1

XHTML

<div id="canvas">
   <div id="topelement">
   </div>
</div>

Css Styling

#canvas { height: 500px; width: 500px; overflow: hidden; }
#topelement { height: 10px; width: 10px; float: left; }

Answer 2

That depends on where your elements are.

To use z-index you must set the position to either relative or absolute.

Answer 3

I don't seem to have the same problem. I created a sample canvas / div like you're talking about here at JSbin: http://jsbin.com/adowo/edit

Is that what you're looking for? Or am I missing something?

Answer 4

The way absolute positioning works is that, in general, elements that are earlier in the code are behind elements that are later in the code. To change that you do indeed use z-index. Note, though, that z-index only works on elements that are positioned.

Another thing that may be tripping you up is that all positioned elements act like z-index "containers". So if your <div> happens to be earlier in the document and in another positioned container, it may be bound to the z-index layer of its ancestor, and so can't ever escape and display on top of the <canvas>. If this is the case, you'll either have to slightly rewrite your CSS or rearrange your page so that the <div> is in a good spot.