在div w3-row / w3-col（W3CSS）上方显示画布

Question

So I'm using w3-css to create a layout for my application but the application includes a canvas. The canvas that I use right now is being hidden by the div above it.

I honestly have no clue how to fix this.

Only thing I could think of and find is Z-index but it wouldn't work to change it.

An example of my problem is in this jsfiddle:

https://jsfiddle.net/L8frrcfr/

<div class="w3-row">
  <div class="w3-col m6 w3-gray">
     <canvas width="100" height="100"></canvas>
  </div>
  <div class="w3-col m6 w3-light-blue" style="height: 100px;">

  </div>
</div>

As you can see the content in the w3-cols display above the canvas. I want the canvas to be above the w3-col.

Answer 1

That is not true. If you fill the canvas (default transparent!), you will see that it is rendered on top:

https://jsfiddle.net/ibowankenobi/L8frrcfr/2/

var context = document.getElementsByTagName("canvas")[0].getContext("2d");
context.fillStyle = "#ff0000";
context.fillRect(0,0,100,100)