z-index of <canvas> in IE 9 problem
I am experiencing a strange issue with the z-index of a <canvas>; not rendering as the right layer in IE9. Please take a look at this jsfiddle:
http://jsfiddle.net/xacto/MTUHX/
Here's how it should work:
- The red-outlined box should be hyperlinked and be the top layer.
- The cyan
<canvas>should the next layer. - The box with the green background should be on the bottom.
This works properly in Chrome, Firefox, and even IE8. However, in IE9 the cyan <canvas> is the top layer and the red-outlined hyperlinked box is no longer clickable except for the small area at the bottom where it does not overlay the cyan <canvas>.
Here's another thing of note: if you change the <canvas> to a <div> i.e. change the line:
var can = $('<canvas></canvas>').css({...
to
var can = $('<div></div>').css({...
It will work in IE9 as well. This leads me to believe this is a <canvas> related issue rather than just a z-index issue.
I've tried many combinations of z-indexes开发者_运维百科 based on suggestions found around the web, but nothing seems to work. If anyone has an answer to this, it would be greatly appreciated.
P.S. Some may ask why the <canvas> is being added via JavaScript and why it is added as the first element of the <body>. Without going into details, the 3rd party app which uses the <canvas> requires it to be added that way.
Don't ask me why, but for some reason the problem appears to be because there is no background set on your boxes.
If you set a background-color for either #box2 or #box3 the link becomes clickable. Live example: http://jsfiddle.net/tw16/HFKMC/
So you can use:
.box2{
z-index: 10;
position: relative;
min-width: 200px;
min-height: 200px;
background-color: rgba(255,255,255,0.01); /* this is basically transparent */
}
By using rgba and setting a very low alpha value, you won't even notice it has been applied.
加载中,请稍侯......
精彩评论