将绝对定位的元素放置在相对定位的父容器之外

Question

我正在尝试将元素（提示框）定位在父元素的外部。

代码示例： 当你悬停在第一个li上时，你会发现提示框被截断。

ul{
      height: 200px;
      overflow: auto;
    }
    li{
      position: relative;
      height: 40px;
    }
    .tooltip{
      position: absolute;
      visibility: hidden;
      bottom: 45px;
    }
    li:hover > .tooltip{
      visibility: visible;
    }

<ul>
      <li>some data 
        <span class="tooltip">Lots of data</span>
      </li>
      <li>some data2 
        <span class="tooltip">Lots of data</span>
      </li>
      ...
      ...
    </ul>


    

好的，上面的代码中，当你将鼠标悬停在第一个li元素上时，tooltip元素被容器overflow: auto裁剪了。auto overflow必须存在，因为该ul元素将包含大量li，我希望用户可以滚动列表项。

所以我的问题是：是否有一种方法可以保持ul元素的滚动行为，同时显示提示框，使其不被ul元素裁剪？

任何帮助都将不胜感激！

- boandriy

---

你需要将提示框元素放在可滚动元素之外，然后通过js显示它，然后将其定位到想要的位置或在所有项目的相同位置显示提示框。 - Huangism

Huangism，这个解决方案看起来有点hacky，你确定不能通过纯CSS/HTML处理吗？ - boandriy

是的，您也可以为ul设置上部填充，以便在顶部留出空间显示工具提示。您无法避免溢出问题。在可滚动容器中显示工具提示并没有什么不好的。 - Huangism

黄氏主义。好的，谢谢你的回复！请把这个作为答案发出来，我会批准的。 - boandriy

也许可以稍等一下，或许其他人会有更好的想法，或者你可以研究一下工具提示库。 - Huangism

Answer 1

使用一个包含元素来应用滚动条：

.list-wrapper {
    height: 100px;
    overflow: auto;
    padding-top: 30px;
}

li {
    position: relative;
    height: 40px;
}

.tooltip {
    position: absolute;
    visibility: hidden;
    bottom: 45px;
}

li:hover>.tooltip {
    visibility: visible;
}

<div class="list-wrapper">
    <ul>
        <li>some data
            <span class="tooltip">Lots of data</span>
        </li>
        <li>some data2
            <span class="tooltip">Lots of data</span>
        </li>
        <li>some data
            <span class="tooltip">Lots of data</span>
        </li>
        <li>some data2
            <span class="tooltip">Lots of data</span>
        </li>
        <li>some data
            <span class="tooltip">Lots of data</span>
        </li>
        <li>some data2
            <span class="tooltip">Lots of data</span>
        </li>
        <li>some data
            <span class="tooltip">Lots of data</span>
        </li>
        <li>some data2
            <span class="tooltip">Lots of data</span>
        </li>
    </ul>
</div>

- isherwood