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

需求

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

实现原理

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

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

代码

//子组件

// 子组件  的 wxml
<view class="container">
  <input class="bar" placeholder="{{placeholder}}" placeholder-class="in-bar" bindinput="onInput"></input>
</view>

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

父组件

//父组件 引用 子组件  
<x-search iconfont="iconfont" icon-sousuo="icon-sousuo" bind:search="onSearch" />
// 原生组件 textarea 
 <textarea name="test" id="test" cols="30" rows="10" style="border:1px solid red;z-index:0;" bind:tap="test"></textarea>
  

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