Question

我有一个滚动的DIV，其中包含许多项目的列表：

 ___________
|         |^|
| Item1   | |
|_________| |
|         | |
| Item2   | |
|_________| |
|         | |
| Item3   | |
|_________|v|

当用户滚动列表项时，会出现一个描述该项目的弹出窗口：

 ___________
|         |^|
| Item1   | |
|_________| |
|        _|_|____________________
| Item2 | Description for item 2 |
|________------------------------
|         | |
| Item3   | |
|_________|v|

困境是滚动div必须有溢出：auto，但弹出窗口想要在div之外可见。所以目前，我的弹出窗口被切断了：

 ___________
|         |^|
| Item1   | |
|_________| |
|        _|_|
| Item2 | De|
|________---|
|         | |
| Item3   | |
|_________|v|

HTML

<div id="box">
  <ul>
    <li>
       <h2>Item 1</h2>
       <span>Description for item 1</span>
    </li>
    <li>
       <h2>Item 2</h2>
       <span>Description for item 2</span>
    </li>
    <!-- ... and many other items --->
  </ul>
</div>

CSS

#box {
   width: 10em;
   height: 20em;
   overflow: auto;
}

#box ul {
   line-height: 2em;
}

#box ul li {
   position: relative;
}

#box ul li span {
   display: none;
   position: absolute;
   right: -1em;
   top: 1em;
   height: 1em;
}

#box ul li:hover span {
   display: block;
}

Answer 1

您可以尝试尝试使用位置：修复弹出元素并查看是否有助于您：

http://jsfiddle.net/SpEb2/

Answer 2

我建议你做点别的事来解决这个问题。如果您使用JavaScript，则可以专门为弹出框创建一个模块。因此，只要您想在当前页面中弹出窗口，就可以包含该模块。

您可以将该模块html和JavaScript混合在一起，使用具有绝对位置的隐藏弹出窗口。每当您使用工具提示将光标移动到页面上的某个元素上时，只需调用JavaScript函数将隐藏的弹出窗口置于光标（或元素）所在的位置，并向弹出窗口显示正确的信息。

此实现可以使您的弹出系统非常模块化和适应性强，您可以在整个网站中使用统一的弹出窗口，并且可以非常轻松地修改其属性。

如何使弹出窗口溢出滚动div？

2 个答案: