微信小程序中 canvas 层级过高问题

在微信小程序中设置自定义标题后，自定义标题并不能覆盖住canvas

小程序中 canvas、textearea、video等组兄散件使用原生渲染，层级最高，无法通过z-idnex设置进氏尘斗行控制

1.在微信小程序的社区也有类型的问题，官方给出的解决办法是将其进行隐藏，在需要时进行显示。

2.介于我的问题是canvas显示问题，并且canvas不是实时渲染，可以将歼磨canvas在渲染后变成图片进行展示：wx.canvasToTempFilePath

如果可以用css动画进行解决，也是可以的

在需要显示遮盖视频框video的时候

给div设置 宽 高、overflow:hidden将video放到上面的div里，并设置position:absolutetop:-100000px 给置出去div，它就看不见了

在需要显示扮稿video时，神缺皮再设置回position和top的值就行了

我测试了，可以用，我在手机端就这么用的

<video src="https://hy.v.netease.com/2018/1030/5c9caed3eea6c6e079673d031fca3350qt.mp4" controls="controls" x5-playsinline="" playsinline="true" webkit-playsinline="true" x-webkit-airplay="true" x5-video-player-type="h5" x5-video-player-fullscreen="" x5-video-orientation="portraint"></video>

各个属性的参考如下：

controls="controls"

x5-playsinline=""    ？？？？？

playsinline="true"

webkit-playsinline="true"

x-webkit-airplay="true"

x5-video-player-type="h5"   

x5-video-player-fullscreen=""

x5-video-orientation="portraint"

<videox5-video-orientation="landscape|portrait"/>  旋转（横屏|竖屏）

注: 此属性只在声明了 x5­video­player­type="h5" 情况下生效

一：设置playsinline不全屏播放

<video      id="videoplay"src={[require("./../../assets/laterImg/westlake.mp4")]}playsInline={true}//react项目中警告，所以把true用{}包起来了webkit-playsinline="true"//兼容iosx5-playsinline="true"//兼容安卓/>

二：设置 x5­video­player­fullscreen 全屏方式

<video id="videoplay"src="xxx"x5-video-player-type="h5"x5-video-player-fullscreen="true"/>

注意：需要重新监听resize事件监听窗口大小变化

window.onresize=function(){videoplay.style.width=window.innerWidth+"px"videoplay.style.height=window.innerHeight+"游差px"}

层级关系的布局有两种解决方法：

一种方法是使用标签的自然顺序和嵌套顺序来形成合理的布局。

而第一种方法却不是万能的，有时候我们需要将原本位于下层的元素移到另一前稿个元素上方，那可以使用z-index；

而你说的不好用，则是zindex没有生效，没生效就是没有定义position属性，如果不想让元素的春嫌位置有所变化，就给赋予z-index属性的元素加上相扒悔手对定位的position:relative

---