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

一、问题描述

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

二、问题排查

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

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

三、解决办法

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

相关推荐
We་ct13 小时前
LeetCode 205. 同构字符串:解题思路+代码优化全解析
前端·算法·leetcode·typescript
2301_8127314114 小时前
CSS3笔记
前端·笔记·css3
ziblog14 小时前
CSS3白云飘动动画特效
前端·css·css3
越努力越幸运50814 小时前
CSS3学习之网格布局grid
前端·学习·css3
半斤鸡胗14 小时前
css3基础
前端·css
ziblog14 小时前
CSS3创意精美页面过渡动画效果
前端·css·css3
akangznl14 小时前
第四章 初识css3
前端·css·css3·html5
会豪14 小时前
深入理解 CSS3 滤镜(filter):从基础到实战进阶
前端·css·css3
头顶一只喵喵14 小时前
CSS3进阶知识:CSS3盒子模型,box-sizing:content-box和box-sizing:border-box的讲解
前端·css·css3
小飞大王66614 小时前
css进阶用法
前端·css