html渲染层级关系，父元素设置overflow：hidden后让子元素的弹窗超出部分依旧可见。

今天遇到个设计需求，筛选条件栏

 

 这种交互效果，用overflow：hidden的话那么就会出现上面那情况。overflow:hidden剪切会将所有超出部分都剪切了，第一栏的弹框则没法显示完全。那么如何处理呢？

 将弹出框用fixed定位，可以实现此效果，但是随着浏览器宽度变化，定位就会很麻烦。

这里我们用positon：relative，设置超出可见，超出的元素是不占用父元素空间，所以下面的元素可以将上面的元素覆盖。这里不设置z-index。是因为我们需要用到元素间层叠关系来处理，当你不设置z-index时候他们在同一层，下面元素会将上面的同级元素多余部分覆盖，里面的弹出框为绝对定位且设置了z-index，所以他脱离了文档流，所以当前元素的超出部分位于下面元素的上面。

而当你点更多按钮时候，我们将上面元素设置z-index，上元素层级将比下元素层级高，所以就让上元素超出部分就显示出来了。贴上代码