css - 固定中的 css 绝对值 - 溢出

Question

我正在尝试在固定面板中添加绝对项目。我的 html 是这样的：

<ul>
<li><a href="#">test</a>
<div class="popup">Popup</div>
</li>
</ul>

的CSS：

ul
{
position:fixed;
left:10px;
top:0;
min-height:100%;
width:80px;
overflow:hidden;
background-color:#ccc;
color:#fff;
z-index:0;
}
ul li
{
position:relative;
}

.popup
{
width:400px;
border:1px solid #000;
display:none;
position:absolute;
color:#000;
z-index:1001;
}

我的问题是溢出行为。如果我禁用溢出，我的弹出窗口效果很好，但即使在绝对位置，弹出窗口也会被隐藏。如果我的 ul 标签中有很多内容，我需要溢出行为来管理滚动效果。我已经尝试将相对位置添加到 li，添加静态高度、宽度、最小宽度、最小高度......就像我在其他帖子中所做的那样，但它并没有解决我的问题。这是代码：http: //jsfiddle.net/jbval/SCzuu/

如果有人有想法。

谢谢你的帮助。

JB

Answer 1

一个肮脏的修复方法是将弹出类的位置设为绝对，然后设置宽度和高度属性，然后溢出。

 position:absolute;
 width:400px;
 height:400px;
 overflow:auto;

http://jsfiddle.net/zcKbd/

或者，如上一个答案所述，添加position: fixed;到弹出类。

Answer 2

• 如何使popup也固定，见下文。

  .popup{ position:fixed; }

这是小提琴

http://jsfiddle.net/jm3Qh/