title: How do I make a div on top of fabric objects
body: <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div  style='position:absolute; left:0px; width:100%; height:100px; 
  background-color:red;z-order:9999;'&gt;
  &lt;/div&gt;            
  &lt;canvas id="c" width="200" height="200"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>// 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)
  </code></pre>
  
  <p>here is a demo on <a href="http://jsfiddle.net/orihadar/F6UU4/41/" rel="nofollow">jsfiddle</a></p>
  
  <p>as you can see in the demo, the red div is in the back.</p>
  
  <p>How do I bring it in front of all the fabricJS objects ?</p>
  
  <p>as you can see I tried using sendToBack and tried changing the z-order but no luck.</p>