一、問題描述

今天小伙伴提了一個bug，在點擊列表項的“…”按鈕應該出現的懸浮菜單顯示不完整：

二、問題排查

一般這種問題，是由于懸浮菜單采用的是絕對定位，而父級采用了overflow:hidden屬性。但需要注意的是，這里的父元素并非指直接父元素，也可以是任意層級的祖先元素。而且并非父級設置overflow:hidden屬性就一定會對內部絕對定位的子元素產生影響。

關于“overflow:hidden截斷條件?及如何避免截斷”可以查看之前文章《Css：overflow: hidden截斷條件?及如何避免截斷》

三、解決辦法

在之前文章《Css：overflow: hidden截斷條件?及如何避免截斷》中提到了4種避免截斷的方法，由于懸浮菜單需要根據列表項進行定位，為了最大限度的不改變原有的實現，這里采用padding及負值margin進行調整：