Question

嘿伙计们，这是关于堆栈溢出的第一个问题。试图让一些非常简单的工作，我敢肯定我错过了一些非常明显的东西。仍然习惯于“标准”css，与非功能性css一起工作太多年了！嘿。

所以，我正在做的样本：

<div style="overflow: auto; border: 1px solid">
    hello
    <div style="position: relative; z-index: 99999; top: 0px; left: 0px;">
        <div style="z-index: 99999; overflow-y: hidden; position: absolute; overflow: hidden; height: 200px; left: 0; auto: 0">
            <ul>
                <li >New</li>
                <li >Old</li>
            </ul>
        </div>
    </div>
</div>

本质上：第一个div是一个容器，我想在添加内容时自动溢出。在那个容器里面，我有一个弹出菜单，我在这里简化了。弹出菜单（应该）直接显示在“hello”下。

然而，我的问题是，正如绝对位置所预期的那样，而不是父节点的“弹出”菜单，它实际上导致滚动条出现在父节点上。

我知道如果我把otu称为“位置：亲戚”它可以工作，但它不再适用于我想要的地方（直接在前一个元素下）。

我在这里缺少什么？

编辑：此处示例：http://marcos.metx.net/OverflowTest.htm

Answer 1

首先 - 内联样式是一个很大的不行。

最好包含一个样式表，并通过“id”或“class”属性将其应用于各个div。

请阅读w3schools

符合标准的css

问题是你的溢出属性。

自动 - “如果剪辑溢出，则应添加滚动条以查看其余内容”

您要找的是“溢出：可见;”

Answer 2

在中间div上使用position: absolute代替relative可以解决您的问题。这给你（在最里面的div上增加了边框颜色）：

alt text http://img.skitch.com/20100211-x8mnu5ds4exphbdbg956cuj6ea.png

这是更新后的源代码：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    </head>
    <body>
        <div style="overflow: auto; border: 1px solid">
            hello
            <div style="position: absolute; z-index: 99999">
                <div style="z-index: 99999; overflow-y: hidden; position: absolute; 
                        overflow: hidden; height: 200px; left: 0; auto: 0;
                        border: 1px solid red">
                    <ul>
                        <li >New</li>
                        <li >Old</li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>

有关详情，请参阅Absolutely positioned box inside a box with overflow: auto or hidden。

摆脱位置的滚动条：绝对位置内：相对溢出内部：auto

2 个答案: