iOS真机,子组件内的节点绝对定位无法覆盖父组件中的节点
请使用ios真机测试。
今天测试发现,总结出来是
-webkit-overflow-scrolling: touch;
导致的问题。
<view class="flex">
<view class="flex-content">
<view class="fixed"></view>
</view>
<view class="flex-bottom"></view>
</view>
.flex {
display: flex;
flex-direction: column;
height: 100%;
position: relative;
overflow: hidden;
.flex-content {
flex: 1;
overflow-y: scroll;
-webkit-overflow-scrolling: touch; // 该样式造成.fixed节点无法覆盖在 .flex-bottom 节点之上
.fixed {
width: 100%;
height: 80%;
background-color: #fff;
position: fixed;
left: 0;
bottom: 0;
z-index: 100;
}
}
.flex-bottom {
height: 120rpx;
background-color: #fff;
}
}