微信小程序 通过脱离文档流和z-index 覆盖 原生组件

需求

覆盖 textarea 等微信小程序原生组件

实现原理

1.子组件使用 position中的 relative、absolute、fixed

2. 子组件和原生组件通过z-index控制覆盖

代码

//子组件

// 子组件  的 wxml

  

//子组件的wxss
.container {
 display: flex;
 align-items: center;
 margin-left: 20rpx;
 position: relative;  // 使用了 position
}

父组件

//父组件 引用 子组件  

// 原生组件 textarea 
 
  

此时可以通过z-index 大小控制子组件和 原生组件textarea覆盖 （前提：要在子组件设置position 使得组件脱离文档流）