第一步

请让该div和canvas同样处于同一画布,都用position:absolute;
然后设置canvas的z-index="-1",是的,你没看错
然后把要覆盖canvas的那个div的z-index="99999";
前提是两者针对父级都是绝对定位

<div class="" style="relative">
    <div class="这个div" style="position:absolute;top:0;left:0;z-index:99999;"></div>
    <div>
        <canvas class="这个canvas" style="position:absolute;z-index:-1;">
    </div>
</div>

搞定,收工

场景不同,可能会有问题,请多尝试,自己多调试几次。换种方式调试

如何让div覆盖canvas元素的更多相关文章

  1. 【高级功能】使用canvas元素(第一部分)

    1. 开始使用 canvas 元素 canvas 元素非常简单,这是指它所有的功能都体现在一个JavaScript对象上,因此该元素本身只有两个属性:width 和 height. canvas 元素 ...

  2. 【温故而知新-Javascript】使用canvas元素(第二部分)

    本文将继续介绍canvas的功能,展示如何绘制更复杂的图形(包括圆弧和曲线),如何使用剪裁区域来限制操作以及如何绘制文本.还是介绍可以应用在画布上的特效和变换,包括阴影.透明度.旋转和坐标重映射. 1 ...

  3. 【温故而知新-Javascript】使用canvas元素(第一部分)

    1. 开始使用 canvas 元素 canvas 元素非常简单,这是指它所有的功能都体现在一个JavaScript对象上,因此该元素本身只有两个属性:width 和 height. canvas 元素 ...

  4. 【高级功能】使用canvas元素(第二部分)

    本文将继续介绍canvas的功能,展示如何绘制更复杂的图形(包括圆弧和曲线),如何使用剪裁区域来限制操作以及如何绘制文本.还是介绍可以应用在画布上的特效和变换,包括阴影.透明度.旋转和坐标重映射. 1 ...

  5. windows phone (25) Canvas元素B

    原文:windows phone (25) Canvas元素B  ZIndex 这也是一个附加属性,表示canvas的children集合内的子元素的显示顺序,在canvas中的元素默认情况下是后面的 ...

  6. JaveWeb 公司项目(1)----- 使Div覆盖另一个Div完成切换效果

    最近在做网页,用的是CSS+DIV的布局方法,搭建了一个简易的界面,大体上分为三个部分,如图所示: 左侧的为主功能导航栏,右侧是具体的功能实现,下方是固定的版权声明,单击左边不同的导航按钮,在div中 ...

  7. HTML5<canvas>标签:使用canvas元素在网页上绘制线条和圆(1)

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  8. 如何把canvas元素作为网站背景总结详解

    如何把canvas元素作为网站背景总结详解 一.总结 一句话总结:最简单的做法是绝对定位并且z-index属性设置为负数. 1.如何把canvas元素作为网站背景的两种方法? a.设置层级(本例代码就 ...

  9. CSS中div覆盖另一个div

    将一个div覆盖在另一个div上有两种手段:一是设置margin为负值,二是设置绝对定位. 可以根个人情况设置z-index的值 1->position 为absolute的情况 <htm ...

随机推荐

  1. jQuery 与 js的入口函数写法

    //js的入口函数执行要比jQuery的入口函数执行得晚一些. //jq的入口函数会等待页面的加载完成才执行,但是不会等待图片的加载. //js的入口函数会等待页面加载完成,并且等待图片加载完成才开始 ...

  2. 基于VS快速排序的单元测试

    1.选择开发工具 1.1由于Visual stdio 已经安装,所以运行界面如下图所示: 2.进行单元测试 2.1用Visual stdio 2017创建一个新项目(快速排序)如下图所示: 其中程序如 ...

  3. [Alpha]Scrum Meeting#4

    github 本次会议项目由PM召开,时间为4月5日晚上10点30分 时长20分钟 任务表格 人员 昨日工作 下一步工作 木鬼 调整&分配工作 撰写博客目录 SiMrua 手工建立再训练数据( ...

  4. [HDU4035] Maze(概率DP)

    HDU4035 有\(n\)个房间 , 由\(n-1\)条隧道连通起来 , 实际上就形成了一棵树 , 从结点\(1\)出发 , 开始走 , 在每个结点\(i\)都有\(3\)种可能 : \(1.\)被 ...

  5. Django中的CSRF(跨站请求伪造)

    Django中的CSRF(跨站请求伪造) Django CSRF  什么是CSFR 即跨站请求伪装,就是通常所说的钓鱼网站. 钓鱼网站的页面和正经网站的页面对浏览器来说有什么区别? (页面是怎么来的? ...

  6. 编译安装php-5.3.27报错:make: *** [sapi/fpm/php-fpm] 错误 1

    安装PHP的时候make报错:make: *** [sapi/fpm/php-fpm] Error 1 原因:Centos6.8之后已经将iconv库加进来了,如果再安装libiconv库相当于重复一 ...

  7. Linux 用Kazam 录有声音的视频

    1.相关链接 https://launchpad.net/kazam 2.特性 录制视频的格式 : webm(vp8),mp4(h264),avi(raw),avi(huffyuv),avi(loss ...

  8. zookeeper伪分布集群配置

    1.上传tar文件zookeeper-3.4.12.tar.gz 2.解压zookeeper-3.4.12.tar.gz [root@localhost zookeeper]# .tar.gz 3.重 ...

  9. <asp:FileUpload>控件 获取不到文件名

    <asp:FileUpload>控件 放在了<asp:UpdatePanel>控件中会导致获取不到文件名.

  10. (转)Uri详解之——Uri结构与代码提取

    前言:依然没有前言…… 相关博客:1.<Uri详解之——Uri结构与代码提取>2.<Uri详解之二——通过自定义Uri外部启动APP与Notification启动> 上几篇给大 ...