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

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

您可以尝试在弹出元素上尝试使用position:fixed，看看这是否对您有帮助：

http://jsfiddle.net/SpEb2/