显示画布以上的div w3-排/w3-col (W3CSS)

Question

所以我使用w3-css为我的应用程序创建一个布局，但是应用程序包含一个画布。我现在使用的画布正被上面的div所隐藏。

我真的不知道怎么解决这个问题。

我唯一能想到和找到的就是Z索引，但是它不能改变它。

我的问题的一个例子是在这个小提琴手：

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>

如您所见，w3-cols中的内容显示在画布上方。我想把画布放在三层楼上方。

Answer 1

那不是真的。如果填充画布(默认透明！)，您将看到它呈现在顶部：

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

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