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

一、问题描述

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

二、问题排查

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

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

三、解决办法

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

相关推荐
nn_(nana)1 天前
修改文件权限--- chmod ,vi/vim,查看文件内容,yum-软件包管理器,systemctl管理系统服务
前端
烛阴1 天前
从零开始掌握C#核心:变量与数据类型
前端·c#
han_1 天前
前端高频面试题之Vuex篇
前端·vue.js·面试
qq_415216251 天前
vue3搭建项目yarn+vue3+webpack+less+element-plus
前端·webpack·less
天天向上10241 天前
VueUse的使用
前端·vue.js·vscode
猪猪拆迁队1 天前
前端图形引擎架构设计:双引擎架构设计
前端·后端·架构
宋辰月1 天前
学习react第三天
前端·学习·react.js
bug总结1 天前
更新原生小程序封装(新增缓存订阅)完美解决
前端·缓存·小程序
5335ld1 天前
后端给的post 方法但是要求传表单数据格式(没有{})
开发语言·前端·javascript·vue.js·ecmascript
二川bro1 天前
第33节:程序化生成与无限地形算法
前端·算法·3d·threejs