antd mobile vue的一定要写在父组件里

antd mobile vue的<a-popup>一定要写在父组件里，如果写在子组件里，会被父组件底部固定按钮覆盖。

父组件的底部固定按钮：

/* 父组件的底部固定按钮 */
position: fixed;
bottom:0;
left:0;
z-index:9;

注意：父组件的底部固定按钮，一定不能设置为-1。不然会被父组件的其他元素覆盖掉。

<a-popup>里面也有底部固定按钮

<a-popup>里面的底部固定按钮样式：

/* <a-popup>里面的底部固定按钮 */
position: fixed;
bottom: 0;
left:0;
right:0;
z-index: 1501;

-webkit-transform: translateZ(1px);
-moz-transform: translateZ(1px);
-o-transform: translateZ(1px);
transform: translateZ(1px);

如果把<a-popup>写在子组件child.vue里面，那么在iOS手机上，<a-popup>底部固定按钮，会被父组件的底部固定按钮覆盖

即使<a-popup>底部固定按钮的z-index为1501，也会被父组件的底部固定按钮给覆盖。

原因

因为不是同一层级。

解决方案

需要把<a-popup>写在父组件里面。和父组件的底部固定按钮，在同一个层级。