Принесите элемент холста на передний план?

Question

Я пытаюсь сделать курсоры мультипути, летающие вокруг моей веб-страницы. Я заставил их работать. Моя проблема в том, что они находятся поверх элемента HTML5 и javscript <canvas>. Когда они закончились, другие анимации JQuery, которые у меня на странице работают нормально, но на большей части холста (это большое интерактивное звездное поле) накладывается сплошной белый цвет. Как я могу это исправить?

Я могу предоставить код, если это необходимо, но как я его структурировал, он опирается на множество внешних скриптов и таблиц стилей и т. Д., Поэтому это может быть немного затруднительно.

В принципе, мне нужно принести холст к фронту, сохраняя часть анимации JQuery.

EDIT: Я думал, что было бы более полезно, если бы я показал изображение, показывающее проблему.

Вы можете увидеть, что осталось от звездного на дне. Место, где белые останавливаются и начинается звездное поле, - это вертикальное ограничение анимации курсора.

Я хочу, чтобы звездное поле появилось на заднем плане, но под курсорами. Возможно ли установить фон контейнера (который является элементом div) скрипту с CSS и использовать этот сценарий для анимирования звездочки? Затем я смогу максимально увеличить размер контейнера и дать курсорам весь экран, чтобы летать.

Кроме того, не беспокойтесь о желтом аллигаторе; это отдельная анимация JQuery, которая может быть частью фона.

EDIT2: Я думаю, что понял свою проблему, но я не уверен, как ее исправить. Чтобы анимировать курсоры внутри контейнеров, <div> с для курсоров находились в пределах <div> контейнера. CSS для курсоров был установлен для самого высокого индекса z, но CSS для контейнера был установлен для самого низкого индекса z. Как я могу это исправить.

Опять же, я могу предоставить сценарии, если это необходимо, но я считаю, что наиболее значимым один здесь является тот, который оживляет курсоры, так что я помещу здесь:

$(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> должен быть внутри контейнера. Но, когда я выставлял их снаружи, все работало точно так, как предполагалось. О, да!

Спасибо! evamvid

Answer 1

С помощью CSS вы можете изменить слой элемента со свойством г-индекса, как так,

CSS

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

Пожалуйста, обратите внимание, что, потому что вы сказали, что вы используете много таблиц стилей, вам может потребоваться увеличить номер индекса z до 999, так как многие плагины установят его на 999.Также для использования свойства z-index элемент должен иметь свойство свойства