绝对位置相对于fabricjs的位置

Question

我有http://jsfiddle.net/116ea4wx/，当我缩放到1.5比例时，我想在div #areaEditor前面加.dcEditor。

<div id="areaEditor">
  <div class="dcEditor" id="idEditor">
       <canvas id="cEditor"></canvas>
  </div>
</div>


#areaEditor {
    position: relative;
    width: 100%;
    min-height: 500px;
    border: 1px solid #eee;
}
.dcEditor {
    width: 332.64px;
    height: 200.34px;
    /* margin: 0 auto; */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background:#222;
}
#cEditor {
    width: 332.64px;
    height: 200.34px;
}

我尝试z-index:-2;绝对值为.dcEditor，但div .dcEditor的背景仍然可见，画布上的文字无法选择。