父级设置overflow:hidden实现子级元素超出

前几天在写项目时，遇到了一个很奇怪的问题，刚开始以为是vue框架本身的一个小bug，发到掘金求助，结果啪啪打脸，是自己对overflow的理解不够透彻，接下来分享下这个问题和相对应的解决方案。

1. 页面代码

• 观察上述代码，思考下children-panel的位置相对于他的父级，他的位置在哪里？

    

2.执行结果

• 意想不到吧，他的位置没有超出父容器 
• 父级容器设置了相对定位
  
• 爷爷容器有y轴溢出显示滚动条
  
• children-panel设置了绝对定位
  
• 现在需求是：children-panel 必须超出父容器，left:-30px 必须要生效，思考下解决方案

3.解决方案

• 取消爷爷容器的overflow属性
  
• 设置父级的相对定位为绝对定位
  

4.最终效果

本文分享结束，内容比较粗暴简单，但是对于一部分开发者（我）来说，出现了这种问题，一时间无法定位问题，找出解决方案，希望本文对各位阅读者有所帮助。