将画布元素放在前面？

Question

我正在尝试让多个光标在我的网页上飞来飞去。我让他们工作。我的问题是它们位于 HTML5 和 javscript <canvas> 元素之上。当它们结束时，我在页面上的其他 JQuery 动画工作正常，但它在大部分画布上放置了纯白色（这是一个大的、交互式的、星空）。我该如何解决这个问题？

如果需要，我可以提供一些代码，但是我构建它的方式，它依赖于很多外部脚本和样式表等，所以它可能有点繁琐。

基本上，我需要将画布放在前面，同时保留部分 JQuery 动画。

编辑：我认为如果我展示一张显示问题的图片会更有帮助。

您可以在底部看到星空的剩余部分。白色停止和星空开始的地方是光标动画的垂直约束。

我想让星空显示在背景上方但在光标下方。无论如何，是否有可能将容器的背景（这是一个div 元素）设置为带有 CSS 的脚本，并使用该脚本为星空设置动画？然后，我可以最大化容器的大小，并让光标全屏飞入。

另外，不要担心黄色鳄鱼；这是一个单独的 JQuery 动画，可以作为背景的一部分。

EDIT2：我想我找到了我的问题，但我不确定如何解决它。为了使容器内的光标动画化，光标的<div>s 在容器的<div> 内。光标的 CSS 设置为最高 z-index，但容器的 CSS 设置为最低 z-index。我怎样才能解决这个问题。

再一次，如果有必要我可以提供脚本，但我相信这里最相关的是那个动画光标，所以我会放在这里：

$(document).ready(function() {
    animateDiv($('.a'));
        animateDiv($('.b'));
        animateDiv($('.c'));

});

function makeNewPosition($container) {

    // Get viewport dimensions (remove the dimension of the div)
    var h = $container.height() - 50;
    var w = $container.width() - 50;

    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);

    return [nh, nw];

}

function animateDiv($target) {
    var newq = makeNewPosition($target.parent());
    var oldq = $target.offset();
    var speed = calcSpeed([oldq.top, oldq.left], newq);

    $target.animate({
        top: newq[0],
        left: newq[1]
    }, speed, function() {
        animateDiv($target);
    });

};

function calcSpeed(prev, next) {

    var x = Math.abs(prev[1] - next[1]);
    var y = Math.abs(prev[0] - next[0]);

    var greatest = x > y ? x : y;

    var speedModifier = 0.25;

    var speed = Math.ceil(greatest / speedModifier);

    return speed;

}

EDIT3：

有效！有效！

我将其他 <div> 元素从容器中取出。我从另一个 SO 问题中复制了脚本，那里的示例让我相信 <divs> 必须在容器内。但是，当我把它们放在外面时，一切都按预期进行。哦，是的！

谢谢！ ㄧㄧㄧㄧㄧㄧ

Answer 1

使用 CSS，您可以像这样使用 z-index 属性更改元素的层，

CSS

canvas { 
    position: absolute;
    z-index: 100;
}

请注意，因为您说您使用了很多样式表，您可能需要将 z-index 数字增加到高于 999，因为很多插件会将其设置为 999。也适合您要使用 z-index 属性，元素必须设置 position 属性