javascript - 在 div w3-row/w3-col (W3CSS) 上方显示画布
问题描述
所以我使用 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。
解决方案
那不是真的。如果您填充画布(默认透明!),您将看到它呈现在顶部:
https://jsfiddle.net/ibowankenobi/L8frrcfr/2/
var context = document.getElementsByTagName("canvas")[0].getContext("2d");
context.fillStyle = "#ff0000";
context.fillRect(0,0,100,100)
推荐阅读
- paypal - Paypal Payment 与多个客户的集成
- java - 方法调用是否还包括执行?
- spring - 当我尝试在服务器(tomcat)上运行我的 spring 应用程序时,会出现此错误消息:
- kubernetes - Kubernetes:为什么修补自定义资源的 /status 子资源会更新父资源?
- python - 提高 iloc 的效率 - 用 startwith() 合并两个表
- xamarin - 如何检测网页是否在 Xamarin 中使用 WebView 成功加载
- laravel - 使用 laravel eloquent 关系查询数据库
- c++ - 将输出放在 c++ 中的 main 函数中的问题
- php - PHPMailer如何使用oauth?
- c# - 在 CellValueChanged 期间 winform datagridview 更新值