html渲染层级关系,父元素设置overflow:hidden后让子元素的弹窗超出部分依旧可见。
今天遇到个设计需求,筛选条件栏这种交互效果,用overflow:hidden的话那么就会出现上面那情况。overflow:hidden剪切会将所有超出部分都剪切了,第一栏的弹框则没法显示完全。那么如何处理呢?将弹出框用fixed定位,可以但是随着浏览器宽度变化,定位就会很麻烦。这里我们用positon:relarive,设置超出可见,超出的元素是不占用父元素空间,所以下面的元素可以将上面的元素覆盖。这里不设置z-index。是因为我们需要用到元素间层叠关系来处理,当你不这是z-index..
原创
2021-08-24 09:37:17 ·
9230 阅读 ·
0 评论