Jump to content
AARRGGHHH

Canvas z-index Is Not Working - Using position:relative;

Recommended Posts

My canvas z-index is not working, the canvases are  both showing up. Canvas1 displays then canvas2 displays beneath it. 

HTML:

		<!-- Canvas locations -->
   		<div id="canvasDisplay" style="position:relative;"> 
			<canvas style="z-index:1; position:relative;" id="canvas1" width="1" height="1">Your browser is too old to support this feature. 				<br>Please consider updating to a modern browser.</canvas>
			<canvas style="z-index:2; position:relative;" id="canvas2" width="1" height="1">Your browser is too old to support this feature. 				<br>Please consider updating to a modern browser.</canvas>  
		</div>

 This displays canvas1 properly.  However, when using JavaScript to hide canvas1 behind canvas2, I get both canvases. 

JavaScript:

                cnv1.style = "z-index:2; position:relative;"
                cnv2.style = "z-index:1; position:relative;"

I'd appreciate any assistance.

Thank you 

Share this post


Link to post
Share on other sites

1. Actually, I checked that page on w3Schools before posting here.  That's how I arrived at the code that I used.  But it's not working.

2. I am using camelCase, for example:

canvasDisplay

But I do not know what you mean by "Hypens", so I do not know how this is causing a problem. Is this a subjective option (like global variables) or a requirement? Did you mean the hyphen in z-index? That's the code used on the page at W3Schools.  Please clarify!

Thank you very much
 

 

 

Edited by AARRGGHHH

Share this post


Link to post
Share on other sites

As stated in link the z-index (note the hyphen) for JavaScript syntax is zIndex ( note the camelCase instead of hyphen), any hyphen in css styling properties is camelCased instead,  text-align becomes textAlign, background-image becomes backgroundImage when referring to these hyphenated properties.

Share this post


Link to post
Share on other sites

In Javascript it is correct to use a hyphen for a CSS property if it's inside a CSS string, but setting the style property as a CSS string is not a common way to set styles, I'm not certain if it will work properly. It would be better to set the Javascript property as such:

cnv1.style.zIndex = "2";
cnv2.style.zIndex = "1";

 

Share this post


Link to post
Share on other sites

Then you are looking to use cssText where you can use what you original posted

cnv1.style.cssText = "z-index:2; position:relative;"
cnv2.style.cssText = "z-index:1; position:relative;" 

OR

cnv1.setAttribute("style", "z-index: 2; position:relative;");
cnv2.setAttribute("style", "z-index: 1; position:relative;"); 

using .style on it own as you originally had it adjust single properties one at a time, and these must be camelCase

Edited by dsonesuk

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×