在 div w3-row/w3-col 上方显示 canvas (W3CSS)

Question

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

老实说，我不知道如何解决这个问题。

我唯一能想到并找到的是 Z-index，但无法更改它。

我的问题的一个例子在这个 jsfiddle 中：

<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>

如您所见，canvas 上方的 w3-cols 中显示的内容。我希望 canvas 高于 w3-col.

Answer 1

事实并非如此。如果你填充canvas（默认透明！），你会看到它呈现在顶部：

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

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

在 div w3-row/w3-col 上方显示 canvas (W3CSS)

Display canvas above div w3-row/w3-col (W3CSS)

html

javascript

css

w3.css