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

Question

我有一个滚动的 DIV，其中包含许多元素的列表:

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

当用户滑过列表项时，会出现一个描述该元素的弹出窗口:

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

困境是滚动的 div 必须有 overflow: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/