Jump to content

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


AARRGGHHH
 Share

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 

Link to comment
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
Link to comment
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.

Link to comment
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";

 

Link to comment
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
Link to comment
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
 Share

×
×
  • Create New...