欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 文旅 > 手游 > Css:如何解决绝对定位子元素内容被父级元素overflow:hidden属性剪裁

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

2025/4/6 2:05:50 来源:https://blog.csdn.net/q1003675852/article/details/146910455  浏览:    关键词:Css:如何解决绝对定位子元素内容被父级元素overflow:hidden属性剪裁

一、问题描述

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

在这里插入图片描述

二、问题排查

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

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

三、解决办法

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

在这里插入图片描述

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词