如何将动画设置为div后面的图像？

Question

我有一个jsfiddle动画，我想将其设置为用作png图像的背景div。我可以设置动画的高度和宽度，我尝试使用

将其设置为div

document.getElementByID('progress').appendChild(canvas);

但是，不是画布显示它应该显示在具有功能动画的图像下面的位置。这是the jsFiddle。

Answer 1

画布将放在#progressbar下面，因为此元素的默认css是。 position:static;。

在画布上应用position:absolute;时，它将放在#progressbar的顶部。

更确切地说：

#progress{
    position: relative;
}

canvas {
    position: absolute; 
    top: 0;
    left: 0;
}

根据z维度的确切位置，您可以使用z-index:-1;或z-index:1;。通过这样做，画布将位于#progressbar的前面或后面。

示例代码：http://jsfiddle.net/u4cLxjrg/1/

Answer 2

http://jsfiddle.net/3qc2p1va/

我在canvas元素中添加了一些CSS样式，使其成为绝对格式并相对于其父元素定位。

canvas {
    display: inline;
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: -1;
}

Answer 3

应用此CSS。 Z-index将画布放在其他div下。

#progress {
        position: relative;
}

canvas {
        top: 0;
        left: 0;
        z-index: -1;
        position: absolute;
 }