在div w3-row / w3-col（W3CSS）上方顯示畫布

Question

因此，我正在使用w3-css為我的應用程序創建布局，但該應用程序包含畫布。 我現在使用的畫布被其上方的div隱藏。

老實說，我不知道如何解決這個問題。

我唯一能想到並找到的就是Z-index，但是更改它是行不通的。

我的問題的一個示例在此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>

如您所見，畫布上方的w3-cols顯示內容。 我希望畫布在w3-col上方。

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)