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

一、问题描述

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

二、问题排查

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

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

三、解决办法

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

相关推荐
拉不动的猪1 分钟前
回顾 pinia VS vuex
前端·vue.js·面试
Warren986 分钟前
Java异常讲解
java·开发语言·前端·javascript·vue.js·ecmascript·es6
超级土豆粉25 分钟前
Taro Hooks 完整分类详解
前端·javascript·react.js·taro
iphone10827 分钟前
从零开始学网页开发:HTML、CSS和JavaScript的基础知识
前端·javascript·css·html·网页开发·网页
2503_9284115633 分钟前
7.31 CSS-2D效果
前端·css·css3
辰九九33 分钟前
Vue响应式原理
前端·javascript·vue.js
中等生37 分钟前
为什么现在的前端项目都要'启动'?新手必懂的开发环境变迁
前端·javascript·react.js
Winslei39 分钟前
【加密专栏】OpenHarmony应用开发-加解密之AES128CBCNoPadding
前端
curdcv_po39 分钟前
threejs,画雾
前端
瑶琴AI前端39 分钟前
HBuilderX uniapp项目转vue-cli项目完整步骤(已成功)
前端·vue.js·uni-app