CODEWITHSUNDEEP
csshtml
Unraised
Unraised

Reputation: 61

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

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!

Upvotes: 6

Views: 41265

Answers (6)

mike_neck
mike_neck

Reputation: 11

Sometimes this may occur in my experiences. I don't know what is happening in the html5 canvas API. If you want draw some figure under the div element, use img tag instead, listed bellow.

--- this sample code is written with prototype.js(1.6) ---

<-javascript-code->

var canvas = $('canvas');
canvas.width = 200;
canvas.height = 200;
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(100, 100, 100, 0, - 360 * Math.PI / 180, true);
ctx.fillStyle = 'rgba(204, 204, 255, 1)';
ctx.strokeStyle = 'rgba(0, 51, 153, 1)';
ctx.fill();
ctx.stroke();
var imgStr = canvas.toDataURL();
var element = new Element('img', {'src' : imgStr);
var target = $('layer1');
target.insert(element);

<- html ->

<div id='layer2' style='z-index : 50;'>&nbsp;</div> 
<canvas id='canvas' style='z-index : 30;'></canvas>
<div id='layer1' style='z-index : 10;'></div>

By the way, my home page is written in Japanese.

Upvotes: 1

galactikuh
galactikuh

Reputation: 795

I futzed with this for a little while and finally got it to work after setting z-index of the thing I want in the background to -1 (versus some positive number).

Upvotes: 0

Tab Atkins-Bittner
Tab Atkins-Bittner

Reputation: 18363

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.

Upvotes: 13

RussellUresti
RussellUresti

Reputation: 6221

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?

Upvotes: 1

Emmanuel
Emmanuel

Reputation: 5403

That depends on where your elements are.

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

Upvotes: 2

Nick Rassette
Nick Rassette

Reputation: 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; }

Upvotes: -7

Related Questions