弹窗点开的一瞬间，把 Overlay 高度拉大了，导致 Container 高度变大，影响了弹窗的位置订正，认为下面还有空间。

解决：期望点击不同按钮，所有的弹窗都在一个地方展示

基本思路

调整目的：overlay需要展示在其参考视口内，不能被遮挡，通过调整placement来达到目的，若所有placement都无法满足，则取唯一没有被遮挡的方向
思路： 根据遮挡情况，在placement全集里进行排除，获取到所有可能可用的位置，然后根据用户设置的原始placement进行优先级排序，最后依次尝试，直到找到一个可用的placement结束

参考视口获取逻辑

1. 获取overlay的container的父级滚动容器作为参考视口(或者container自身即为滚动容器)
2. 若overlay的container定位节点 offsetParent 超出了这个滚动容器(Fixed情况)，则根据浏览器视口作为参考视口
3. 其他情况均使用浏览器视口作为参考视口(document.documentElement)

过程

placement全集为: t tl tr r rt rb b bl br l lt lb
placement可以拆分为 direction + align

1. 排除超出参考视口各方向的placements

1. 若上方超出视口，排除 t tl tr
2. 若右侧超出视口，排除 r rt rb
3. 若下方超出视口，排除 b bl br
4. 若左侧超出视口，排除 l lt lb

2. 根据规则对剩余可用的placements排序

规则：根据用户设定的placement，调整后更符合预期的优先级更高。

更符合预期规则：

1. 同 direction > 反向 direction > 其它 direction
2. 同 align > 其它 align
3. 位置顺序 中间 > 左=上 > 右=下
4. direction 优先级 大于 align

例子：
1.用户设定 placement为 t，则优先级从大到小为：

1. t > tl > tr 同向优先级最高，其次比较 align，相同align优先级更高
2. b > bl > br 对向优先级其次，其次比较 align
3. l > lt > lb 左 > 右，其次比较align
4. r > rt > rb 同上

2.用户设定placement为 tl，则优先级从大到小为：

1. tl > t > tr
2. bl > b > br
3. l > lt > lb
4. r > rt > rb

3. 按序尝试placement是否可以将overlay完整置入参考视口

相对于参考视口viewport
overlayLeft >= 0 && overlayTop >=0 && overlayLeft + overlayWidth < viewportWidth && overlayTop + overlayHeight <= viewportHeight

Demo: https://riddle.alibaba-inc.com/riddles/1c884671

弹窗位置不跟随变化问题

弹层的节点是挂在 body 上的。那么如果 tigger 在overflow的容器中，只要在容器中滚动，就会造成 tigger 和 overlay 脱离的现象。
如下图，滚动后由于弹层的位置不变，脱离了：

解决思路

监听 tigger 与 overlay 之间所有的 overflow 元素的滚动事件，只要有滚动就动态更新弹窗位置。

新问题：tigger滚动消失后，弹窗飘在上面

解决思路

tigger 消失弹窗立刻隐藏。当然为了节省计算，应该判断满足有 中间 overflow 滚动元素的时候才会做此操作。

1. 翻转一次

1.1 top < 0

top => bottom; Bottom => Top;

1.2 left< 0

1.3 top + height > clientHeight

1.3 left + width > clientWidth

2. 翻转两次

2.1 TOP < 0 & Left < 0

2.2 其他以此类推不再写

3. 空间不够

怎么翻转都不够，则进行位置变化 top<0 的时候 top=0