在做侧边栏菜单的时候遇到一个问题，二级菜单过长，需要设置最大高度和滚动条，于是加了overflow-y:auto，然后发现三级菜单无法正常弹出了，只能在二级菜单的容器里面弹出。

经过排查后，发现问题出在当父元素设置了overflow-y:auto，x轴只能是hidden，无法设置为visiable，所以子元素的溢出会被隐藏，这个机制就是这样，只能曲线救国了。

解决办法：动态获取父元素的位置，给子元素设置fixed定位，以实现弹出效果。

let erd = elementResize()

erd.listenTo(document.getElementsByClassName('subItem'),function(element){

 element.childNodes[1].style.position = 'fixed'

 element.childNodes[1].style.top = element.parentNode.getBoundingClientRect().top + 'px'

 element.childNodes[1].style.left = 350 + 'px'

})

这里用到elementResize来监听二级菜单的展开，然后用getBoundingClientRect来获取打开的二级菜单的top，子元素设置fixed定位和对应的left、top，实现弹出效果。

ps：博主还踩了一个巨大的坑，这个方法在谷歌、火狐等浏览器都没有问题，但在ie11上行不通，子元素的溢出还是被隐藏了，fixed定位都不起效。

ie6不支持fixed定位，但是ie11的确是支持的，几乎翻遍了所有相关的解答，都没有人遇到这个问题，于是打开F12一个个元素进行排查，看看到底是哪个属性冲突了。经过排查，偶然发现把父元素的border-radius属性去掉，就可以了……至今没想明白这其中有什么关联。