Draggable does not work when I have a canvas element with a z-index

Draggable does not work when I have a canvas element with a z-index

I have the following html:
<div id="MainCanvas">
      <canvas id="CanvasOverlay" width="500" height="500"></canvas>
      <div id="KntxStage">
            <div class="elementBorder ui-draggable ui-resizable" style="position: absolute; top: 0px; left: 0px; width: 38px; height: 39px;">&nbsp; </div>
      </div>
</div>

My CSS is:

#CanvasOverlay
{
    position: absolute;
    top: 0px; left: 0px;
    width: 100%;
    height:100%;
    z-index:50;    
}
.elementBorder
{
    width:20px;
    /* border-width: 2px; */
    padding:0px;
    margin:0px;
    border-color: #000000;
    background-color:#ffffff;   
}

AND I activate the draggable with the following js:

elem.draggable( { drag: this.Dragged } );
elem.resizable();

My Problem is that the drag does not work if the Z-index of my



























#CanvasOverlay is 50. If I set it to -1 then it works.

What I am trying to do is to have a canvas element as an overlay appear in front of my drag-able elements.
Why doesn't this work?

thanks