Question

我遇到了<canvas>的z-index的奇怪问题;不能在IE9中渲染为正确的图层。请看看这个jsfiddle：

以下是它应该如何运作：

红色方框应该是超链接的，并且是顶层。
青色<canvas>应该是下一层。
带有绿色背景的方框应位于底部。

这适用于Chrome，Firefox甚至IE8。但是，在IE9中，青色<canvas>是顶层，红色轮廓的超链接框不再可点击，除了底部的小区域没有覆盖青色<canvas>。

以下是另一点需要注意的事项：如果您将<canvas>更改为<div>，即更改该行：

var can = $('<canvas></canvas>').css({...

到

var can = $('<div></div>').css({...

它也适用于IE9。这让我相信这是<canvas>相关问题，而不仅仅是z索引问题。

我根据网络上的建议尝试了很多z索引组合，但似乎没有任何效果。如果有人对此有答案，我们将不胜感激。

P.S。有些人可能会问为什么<canvas>是通过JavaScript添加的，以及为什么将它添加为<body>的第一个元素。没有详细说明，使用<canvas>的第三方应用程序要求以这种方式添加它。

Answer 1

不要问我为什么，但出于某种原因，问题似乎是因为您的盒子上没有设置背景。

如果您为background-color或#box2设置了#box3，则该链接会变为可点击。实例：http://jsfiddle.net/tw16/HFKMC/

所以你可以使用：

.box2{
    z-index: 10;
    position: relative;
    min-width: 200px;
    min-height: 200px;
    background-color: rgba(255,255,255,0.01); /* this is basically transparent */
}

通过使用rgba并设置非常低的alpha值，您甚至不会注意到它已被应用。

IE 9问题</canvas>中<canvas>的z-index

1 个答案: