Question

HTML：

<div  style='position:absolute; left:0px; width:100%; height:100px; 
background-color:red;z-order:9999;'>
</div>            
<canvas id="c" width="200" height="200"></canvas>

JS：

// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c');

// some initializing stuff
fabric.Object.prototype.set({
    transparentCorners: false,
    cornerColor: 'rgba(102,153,255,0.5)',
    cornerSize: 12,
    padding: 5
});

canvas.add(new fabric.Rect({
    left: 50,
    top: 50,
    fill: '#269926',
    width: 100,
    height: 100,
    originX: 'left',
    originY: 'top'
}));

var obj = new fabric.Rect({
    left: 20,
    top: 20,
    fill: '#555555',
    width: 100,
    height: 100,
    originX: 'left',
    originY: 'top'
});
canvas.add(obj).renderAll();
canvas.sendToBack(obj)

这是jsfiddle

上的演示

正如你在演示中看到的那样，红色div位于后面。

如何将它带到所有fabricJS对象的前面？

你可以看到我尝试使用sendToBack并尝试更改z顺序但没有运气。

Answer 1

以下是z-index的演示：

demo

 <div  style='position:absolute; left:0px; width:100%; height:100px; background-color:red;z-order:9999; top:0'>
</div>     
<canvas id="c" width="200" height="200" style='z-index:-1'></canvas>

和dom manuplation的演示：

demo

如何在布料对象上创建div

1 个答案: