Css:如何解决绝对定位子元素内容被父级元素overflow:hidden属性剪裁

一、问题描述

今天小伙伴提了一个bug,在点击列表项的"..."按钮应该出现的悬浮菜单显示不完整:

二、问题排查

一般这种问题,是由于悬浮菜单采用的是绝对定位,而父级采用了overflow:hidden属性。但需要注意的是,这里的父元素并非指直接父元素,也可以是任意层级的祖先元素。而且并非父级设置overflow:hidden属性就一定会对内部绝对定位的子元素产生影响。

关于"overflow:hidden截断条件‌及如何避免截断"可以查看之前文章《Css:overflow: hidden截断条件‌及如何避免截断

三、解决办法

在之前文章《Css:overflow: hidden截断条件‌及如何避免截断》中提到了4种避免截断的方法,由于悬浮菜单需要根据列表项进行定位,为了最大限度的不改变原有的实现,这里采用padding及负值margin进行调整

相关推荐
難釋懷13 分钟前
Nginx获取客户端真实IP
服务器·前端·nginx
甲维斯33 分钟前
GLM5.2超过Opus4.8Think,全球第二了!
前端·人工智能·ai编程
黄敬峰34 分钟前
纯 CSS3 打造 3D 旋转魔方:从文档流、Flex 布局到空间变换的硬核复盘
css
by————组态35 分钟前
Ricon组态系统 - 新一代Web可视化组态平台
前端·后端·物联网·架构·组态·组态软件
JieE21236 分钟前
手把手带你用纯 CSS 实现一个 3D 旋转魔方,这些前端基础你能打几分?
前端·css·html
lichenyang4531 小时前
鸿蒙 Web 容器(二):H5 和 ArkTS 说话前,先定一份「协议」
前端
JYeontu1 小时前
开箱流水加载动画
前端·javascript·css
RANxy1 小时前
AntV 入门系列:G6 图可视化实战
前端
尽欢i1 小时前
Vue3 customRef 封神教程:防抖、本地存储、自动埋点一套搞定,模板干干净净
前端·javascript·vue.js