z-index的失效问题

问题：使用antd-mobile开发弹窗加键盘，在ios中键盘被遮住，但是仍可以操作。
代码:

      
        

          文本框
        
      

问题.png

原因：
一些浏览器在设置position:fixed;后会触发元素创建一个新的层叠上下文，并且当成一个整体在父层叠上下文中进行比较。如上面的dom结构，当给b设置了position:fixed;属性后，会触发创建一个新的层叠上下文，它的父层叠上下文变成了a，所以b只能在a的内部进行层叠比较。这也就是大家熟听的“从父原则”。
解决：给父级元素设置z-index

div[id^="am-modal-container"]{
    position: fixed;
    z-index: 999;
}
div[id^="am-number-keyboard-container"]{
    position: fixed;
    z-index: 1000;
}

效果.jpg

参考：position为fixed时设置z-index失效