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

【问题标题】：css absolute in fixed - overflow固定中的 css 绝对值 - 溢出
【发布时间】：2013-04-04 18:06:15
【问题描述】：

我正在尝试在固定面板中添加绝对项目。我的 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/

如果有人有想法。

感谢您的帮助。

【问题讨论】：

标签： css css-position

【解决方案1】：

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

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

http://jsfiddle.net/zcKbd/

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

【讨论】：

感谢您的回答。第一个解决方案对我不起作用，因为我需要 ul 项目的固定而不是静态。第二个似乎更好，将弹出窗口定义为固定，我会试试这个。

【解决方案2】：

如何将popup 也设为固定，见下文。

.popup{ position:fixed; }

这是小提琴

http://jsfiddle.net/jm3Qh/

【讨论】：

谢谢，正如Mido所说，这可能是一个解决方案，如果有任何副作用，我会尝试。
很高兴它有帮助。那么您可能会考虑支持答案，因为它可能对其他人有益。
我喜欢投票，但我似乎还没有足够的声望投票。