背景

小程序的原生组件无法被覆盖，例如video 、ive-player 组件上无法覆盖原生组件
原因：由于 微信小程序的架构wxml设计

wxml

微信小程序的webview 层渲染是依托于 html 的。那么想view、span 这些都是被微信小程序通过wcc工具编译wxml为js，得到 Virtual DOM 结构,例如

  "tag": "wx-page",

  "children": [

   {

     "tag": "wx-view",

  」
  ]

}

最后在被parse 为html，那像一些原生的组件则是依托微信的能力实现，那原生组件在创建的时候，会先用 基础组件占位，然后在上层使用，原生组件。
原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上

cover-view 与 cover-image：

为了解决原生组件层级最高的限制。小程序专门提供了 cover-view 和 cover-image 组件，可以覆盖在部分原生组件上面。

限制：

• 无法覆盖textarea、input。
• 不支持设置单边的border、background-image、shadow、overflow: visible等。
• cover-view 支持 overflow: scroll，但不支持动态更新 overflow。
• cover-view和cover-image的aria-role仅可设置为 button，读屏模式下才可以点击，并朗读出“按钮”；为空时可以聚焦，但不可点击。
• cover-view和cover-image的子节点如果溢出父节点，容易出现布局错误。
• 自定义组件嵌套 cover-view 时，自定义组件的 slot 及其父节点暂不支持通过 wx:if 控制显隐，否则会导致 cover-view 不显示。

同层渲染

微信官方给出解决方案， 在 WebView 所渲染的页面中，与其他 HTML 控件在同一层级。具体原生组件https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html#原生组件的使用限制