Question

在This Demo使用Raphaël-JavaScript库我试图在两个div（＃layer1和＃layer2 ）的顶部绘制它们具有图像背景。但正如您所见，绘图对象（红色圆圈）位于其他图像的背面（可见的原因是使用PNG图像作为图层）。

您能告诉我如何重新排序它们并更改元素的zindex以将绘图对象环绕到顶部的第一个吗？

#layer1 {
    top:0px;
    position:absolute;
    width:794px;
    height:680px;
    background-image: url('http://i1275.photobucket.com/albums/y443/Behseini/che2_zps88cdd50e.png');
    background-repeat: no-repeat;
    z-index:100;
}
#layer2 {
    top:0px;
    position:absolute;
    width:794px;
    height:680px;
    background-image: url('http://i1275.photobucket.com/albums/y443/Behseini/che_zps3fa0eafd.png');
    background-repeat: no-repeat;
    z-index:10;
}
#canvas {
    z-index:500;
}

Answer 1

可能会有一些改变......小提琴here

要使z-index生效，您需要添加

position: absolute;

到该元素的css;

我还将背景颜色放在第一个div样式上，因此它不会隐藏另一个图片，或者你可能会为这个或其他东西添加不透明度。

订购Raphaël在其他部门之上绘图的问题

1 个答案: