如何让汉堡菜单内按钮的absolute定位信息框始终显示在按钮下方？

问题根源在于你给信息框设置了固定的top和right数值，且未给它与按钮的共同父容器设置相对定位。绝对定位元素会以最近的非static定位父元素为基准，当前写法让它相对于整个页面定位，自然无法跟随按钮位置变化。

修改步骤：

• 给包裹按钮和信息框的父div添加position: relative样式，将其设为信息框的定位基准
• 把信息框的top改为100%（确保显示在按钮下方），right替换为left: 0（对齐父容器左侧，可按需调整），移除固定数值的top和right

修改后的代码示例：

[:div {:style {:position "relative"}} ; 添加相对定位的父容器
 [:> bs/Button [:span {:style {:margin-left 10}} "Feedback"]]

 [:p {:style
      {:display (if (= nil @(rf/subscribe [::subs/hover-feedback]))
                  "none"
                  @(rf/subscribe [::subs/hover-feedback]))
       :position "absolute"
       :top "100%" ; 相对于父容器底部，即按钮下方
       :left "0" ; 对齐父容器左侧，可按需调整
       :margin-top "5px" ; 可选，增加与按钮的间距
       :z-index "2"
       :border-radius "5px"
       :border "1px solid black"
       :width "300px"
       :padding "5px"
       :background-color "white"}}
 "Feedback information."]]

这样调整后，无论按钮因响应式布局移动到何处，信息框都会始终显示在按钮的相对位置，因为它的定位基准是包裹按钮的父容器，而非整个页面。

内容的提问来源于stack exchange，提问作者niloofar