记录position设置为fixed失效的问题

问题

如图：当前是个人信息展示页面（个人信息和岗位信息有个tab项切换）

个人信息tab页内，可以看到性别选择下拉框出现的不全

排查过程

难道是下拉框高度的问题导致没有撑开？

我们给容器设置高度试一下，马上动手，给了一个400px高度。如图：

哎，好像问题解决了，轻轻松松样式一改，电脑一关，下班回家。

但是！这里我手贱了一下，鼠标往下滚。有点不对劲了。

下拉框为啥这么高了？

奥，因为我们刚刚强制设置了height：400px，加上其他内容的高度，导致下拉框内容巨高。我们把height：400px去掉，只把鼠标往下滚。

会发现，如图：

下拉框高度是没有问题的，下拉框的内容没问题。但是这个出现位置有点莫名奇妙了。

下拉框没有相对当前视口固定，它固定在了箭头的位置。

为什么不是出现在视口的最底部呢， 我们去看一下组件库的css样式。这里用的JD的 NutUI-React 组件库。如图：

下拉框设置了position：fixed，并且bottom为0。

按照道理，这里样式设置的没有问题。下拉框该乖乖出现在视口最底部。但是为什么不是相对于视口呢？

经过我的一番调试，发现下拉框相对的是这个容器，如图：

这个时候恍然大悟，这不就是经典面试题嘛。祖先元素是Tabs选项卡组件，该组件设置了动画transform导致下拉框的position：fixed 属性失效，改为参考该祖先组件。

这里可以参考MDN的解释

解决方案

这里给出我想到的解决方案：

1. 直接将祖先组件的动画效果去掉。动画效果去掉后导致Tabs组件无法正常使用。（×）
2. 用React的createPortal api将picker传输到指定dom节点，脱离Tabs选项卡组件。Taro框架目前好像不支持在小程序上使用createPortal（×）
3. 将包含picker的用户信息容器抽离出来，与Tabs选项卡组件同级。没有祖先的关系，参考视口。（√）

给出方法3的代码片段

我们这里还要用到Tabs组件的样式，就把Tabs.TabPane 的内容提取出来了。监听currentTab的切换，设置对应的tab页的display：none属性，来显示和隐藏。

最终效果

成功下班