使用溢出隐藏和滚动条显示容器外的内容答案

【问题标题】：Show content outside container with overflow hidden and scrollbars使用溢出隐藏和滚动条显示容器外的内容
【发布时间】：2018-04-02 19:25:29
【问题描述】：

是否可以在 overflow 设置为隐藏的容器上显示 tooltip？

我知道使用position: fixed 是可能的（绿色容器具有overflow: hidden 属性）。

我做了2个例子，问题是滚动时...首先按钮与框架一起滚动，其次，工具提示与框架一起滚动。

我需要将这些框放在带有overflow: hidden 的容器内，并在悬停时显示工具提示（但是，工具提示被容器的overflow: hidden 隐藏）。

是否可以仅使用 CSS 来做到这一点？

【问题讨论】：

【解决方案1】：

这样做的方法是将其设置为父position="absolute" 而不是relative。所以tooltip 不会相对于它的父级定位并且可以超过容器。

但是对于您的情况，它会降低您的设计，所以我建议您执行以下操作之一：

轻松地将padding-top: 40px; 添加到容器中，以便工具提示可以显示在顶部。最好也设置一个padding-bottom: 40px;，使其不对称。

或者不要把tooltip放在项目上方，把它们放在左边，我也推荐你。

【讨论】：