具有最大 z-index 的绝对定位元素没有可见溢出

Question

我正在制作一个带有可垂直滚动的固定位置侧边栏的复杂网站。侧边栏包含在悬停时显示工具提示的图标。工具提示水平溢出其侧边栏容器，并且溢出不显示。

这里是侧边栏的 DOM 结构以及各自的 z-index 和位置。请注意，根 <ui-view> 元素至少是 DOM 中所有其他渲染元素的兄弟。

<ui-view> // position: relative
    <div> // position: fixed
        <ul> // position: relative
            <ui-view> // position: relative
                <li> // position: relative
                    <a> // position: relative
                        <div> // position: absolute, tooltip here

所有这些元素都有overflow-x: visible 和z-index: 2000，这是DOM 中最高的。

此配置导致工具提示溢出可滚动，不可见！

这是一个工作的 plunker https://plnkr.co/edit/QVAcspXd72E4vY8D2liU?p=preview。

更新：

较高的div 具有overflow-y:auto 以启用垂直滚动。删除它会使工具提示溢出可见，但会阻止滚动条垂直滚动。

Answer 1

我正在使用 Angular 库 UI Bootstrap 来获取我的工具提示功能。原来它有一个tooltip-append-to-body 选项。将其设置为 true，它解决了我所有的问题！