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

一、问题描述

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

二、问题排查

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

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

三、解决办法

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

相关推荐
前端 贾公子2 小时前
pnpm 的 resolution-mode 配置 ( pnpm 的版本解析)
前端
伍哥的传说3 小时前
React 自定义Hook——页面或元素滚动到底部监听 Hook
前端·react.js·前端框架
麦兜*5 小时前
Spring Boot 集成Reactive Web 性能优化全栈技术方案,包含底层原理、压测方法论、参数调优
java·前端·spring boot·spring·spring cloud·性能优化·maven
知了一笑5 小时前
独立开发第二周:构建、执行、规划
java·前端·后端
UI前端开发工作室6 小时前
数字孪生技术为UI前端提供新视角:产品性能的实时模拟与预测
大数据·前端
Sapphire~6 小时前
重学前端004 --- html 表单
前端·html
遇到困难睡大觉哈哈6 小时前
CSS中的Element语法
前端·css
Real_man6 小时前
新物种与新法则:AI重塑开发与产品未来
前端·后端·面试
小彭努力中6 小时前
147.在 Vue3 中使用 OpenLayers 地图上 ECharts 模拟飞机循环飞行
前端·javascript·vue.js·ecmascript·echarts
老马聊技术6 小时前
日历插件-FullCalendar的详细使用
前端·javascript